﻿<!DOCTYPE html>
<html lang="zh-CN">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="profile" href="http://gmpg.org/xfn/11">
	<link rel="pingback" href="http://jspang.com/xmlrpc.php">

<title>技术胖的Vue-router视频教程 &#8211; 技术胖-胜洪宇关注web前端技术</title>
<link rel='dns-prefetch' href='//fonts.googleapis.com' />
<link rel='dns-prefetch' href='//s.w.org' />
<link rel="alternate" type="application/rss+xml" title="技术胖-胜洪宇关注web前端技术 &raquo; Feed" href="http://jspang.com/feed/" />
<link rel="alternate" type="application/rss+xml" title="技术胖-胜洪宇关注web前端技术 &raquo; 评论Feed" href="http://jspang.com/comments/feed/" />
<link rel="alternate" type="application/rss+xml" title="技术胖-胜洪宇关注web前端技术 &raquo; 技术胖的Vue-router视频教程评论Feed" href="http://jspang.com/2017/04/13/vue-router/feed/" />
		<script type="text/javascript">
			window._wpemojiSettings = {"baseUrl":"https:\/\/s.w.org\/images\/core\/emoji\/2.3\/72x72\/","ext":".png","svgUrl":"https:\/\/s.w.org\/images\/core\/emoji\/2.3\/svg\/","svgExt":".svg","source":{"concatemoji":"http:\/\/jspang.com\/wp-includes\/js\/wp-emoji-release.min.js?ver=4.8.2"}};
			!function(a,b,c){function d(a){var b,c,d,e,f=String.fromCharCode;if(!k||!k.fillText)return!1;switch(k.clearRect(0,0,j.width,j.height),k.textBaseline="top",k.font="600 32px Arial",a){case"flag":return k.fillText(f(55356,56826,55356,56819),0,0),b=j.toDataURL(),k.clearRect(0,0,j.width,j.height),k.fillText(f(55356,56826,8203,55356,56819),0,0),c=j.toDataURL(),b!==c&&(k.clearRect(0,0,j.width,j.height),k.fillText(f(55356,57332,56128,56423,56128,56418,56128,56421,56128,56430,56128,56423,56128,56447),0,0),b=j.toDataURL(),k.clearRect(0,0,j.width,j.height),k.fillText(f(55356,57332,8203,56128,56423,8203,56128,56418,8203,56128,56421,8203,56128,56430,8203,56128,56423,8203,56128,56447),0,0),c=j.toDataURL(),b!==c);case"emoji4":return k.fillText(f(55358,56794,8205,9794,65039),0,0),d=j.toDataURL(),k.clearRect(0,0,j.width,j.height),k.fillText(f(55358,56794,8203,9794,65039),0,0),e=j.toDataURL(),d!==e}return!1}function e(a){var c=b.createElement("script");c.src=a,c.defer=c.type="text/javascript",b.getElementsByTagName("head")[0].appendChild(c)}var f,g,h,i,j=b.createElement("canvas"),k=j.getContext&&j.getContext("2d");for(i=Array("flag","emoji4"),c.supports={everything:!0,everythingExceptFlag:!0},h=0;h<i.length;h++)c.supports[i[h]]=d(i[h]),c.supports.everything=c.supports.everything&&c.supports[i[h]],"flag"!==i[h]&&(c.supports.everythingExceptFlag=c.supports.everythingExceptFlag&&c.supports[i[h]]);c.supports.everythingExceptFlag=c.supports.everythingExceptFlag&&!c.supports.flag,c.DOMReady=!1,c.readyCallback=function(){c.DOMReady=!0},c.supports.everything||(g=function(){c.readyCallback()},b.addEventListener?(b.addEventListener("DOMContentLoaded",g,!1),a.addEventListener("load",g,!1)):(a.attachEvent("onload",g),b.attachEvent("onreadystatechange",function(){"complete"===b.readyState&&c.readyCallback()})),f=c.source||{},f.concatemoji?e(f.concatemoji):f.wpemoji&&f.twemoji&&(e(f.twemoji),e(f.wpemoji)))}(window,document,window._wpemojiSettings);
		</script>
		<style type="text/css">
img.wp-smiley,
img.emoji {
	display: inline !important;
	border: none !important;
	box-shadow: none !important;
	height: 1em !important;
	width: 1em !important;
	margin: 0 .07em !important;
	vertical-align: -0.1em !important;
	background: none !important;
	padding: 0 !important;
}
</style>
<link rel='stylesheet' id='crayon-css'  href='style/css/crayon.min.css' type='text/css' media='all' />
<link rel='stylesheet' id='crayon-theme-github-css'  href='style/css/github.css' type='text/css' media='all' />
<link rel='stylesheet' id='crayon-font-droid-sans-mono-css'  href='style/css/droid-sans-mono.css' type='text/css' media='all' />
<link rel='stylesheet' id='smartideo_css-css'  href='style/css/smartideo.css' type='text/css' media='screen' />
<link rel='stylesheet' id='toc-screen-css'  href='style/css/screen.min.css' type='text/css' media='all' />
<link rel='stylesheet' id='wpsm_tabs_r-font-awesome-front-css'  href='style/css/font-awesome.min.css' type='text/css' media='all' />
<link rel='stylesheet' id='wpsm_tabs_r_bootstrap-front-css'  href='style/css/bootstrap-front.css' type='text/css' media='all' />
<link rel='stylesheet' id='wpsm_tabs_r_animate-css'  href='style/css/animate.css' type='text/css' media='all' />
<link rel='stylesheet' id='bootstrap-css'  href='style/css/bootstrap.min.css' type='text/css' media='all' />
<link rel='stylesheet' id='font-awesome-css'  href='style/css/font-awesome01.min' type='text/css' media='all' />
<link rel='stylesheet' id='slicknav-css'  href='style/css/slicknav.css' type='text/css' media='all' />
<link rel='stylesheet' id='aster-stylesheet-css'  href='style/css/style.css' type='text/css' media='all' />
<link rel='stylesheet' id='aster-responsive-css'  href='style/css/responsive.css' type='text/css' media='all' />
<link rel='stylesheet' id='aster-google-fonts-css'  href='https://fonts.googleapis.com/css?family=Open+Sans%3A400%2C300%2C300italic%2C400italic%2C600%2C600italic%2C700%2C700italic&#038;subset=latin%2Clatin-ext' type='text/css' media='all' />
<link rel='stylesheet' id='xhshop_css-css'  href='style/css/api-form.css' type='text/css' media='all' />
<script type='text/javascript' src='style/js/jquery.js'></script>
<script type='text/javascript' src='style/js/jquery-migrate.min.js'></script>
<script type='text/javascript'>
/* <![CDATA[ */
var CrayonSyntaxSettings = {"version":"_2.7.2_beta","is_admin":"0","ajaxurl":"http:\/\/jspang.com\/wp-admin\/admin-ajax.php","prefix":"crayon-","setting":"crayon-setting","selected":"crayon-setting-selected","changed":"crayon-setting-changed","special":"crayon-setting-special","orig_value":"data-orig-value","debug":""};
var CrayonSyntaxStrings = {"copy":"\u4f7f\u7528 %s \u590d\u5236\uff0c\u4f7f\u7528 %s \u7c98\u8d34\u3002","minimize":"\u70b9\u51fb\u5c55\u5f00\u4ee3\u7801"};
/* ]]> */
</script>
<script type='text/javascript' src='style/js/crayon.min.js'></script>
<link rel='https://api.w.org/' href='http://jspang.com/wp-json/' />
<link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://jspang.com/xmlrpc.php?rsd" />
<link rel="wlwmanifest" type="application/wlwmanifest+xml" href="http://jspang.com/wp-includes/wlwmanifest.xml" /> 
<link rel='prev' title='技术胖的Vue-cli 视频教程' href='http://jspang.com/2017/04/10/vue-cli/' />
<link rel='next' title='技术胖的vuex视频教程' href='http://jspang.com/2017/05/03/vuex/' />
<meta name="generator" content="WordPress 4.8.2" />
<link rel="canonical" href="http://jspang.com/2017/04/13/vue-router/" />
<link rel='shortlink' href='http://jspang.com/?p=1461' />
<link rel="alternate" type="application/json+oembed" href="http://jspang.com/wp-json/oembed/1.0/embed?url=http%3A%2F%2Fjspang.com%2F2017%2F04%2F13%2Fvue-router%2F" />
<link rel="alternate" type="text/xml+oembed" href="http://jspang.com/wp-json/oembed/1.0/embed?url=http%3A%2F%2Fjspang.com%2F2017%2F04%2F13%2Fvue-router%2F&#038;format=xml" />
<style type="text/css">div#toc_container ul li {font-size: 80%;}</style>		<style type="text/css" id="wp-custom-css">
			/*
您可以在此处加入您的CSS。

点击上方的帮助图标来了解更多。
*/
#page-links{
    margin: 20px 5px;
	color:#222;
    line-height: 33px;
}
#page-links a{ 
    display: inline-block;
    line-height: 20px;
    padding:3px 10px 3px 10px;
    border:1px solid #ccc;
}
.toc_list li{
  list-style:none;
}		</style>
	
<script>
var _hmt = _hmt || [];
(function() {
  var hm = document.createElement("script");
  hm.src = "https://hm.baidu.com/hm.js?f71290979fed5851ccca7bda346dcdf7";
  var s = document.getElementsByTagName("script")[0]; 
  s.parentNode.insertBefore(hm, s);
})();
</script>


</head>

<body class="post-template-default single single-post postid-1461 single-format-standard">


<header class="header">
	<div class="header-top text-center">

					<div class="text-logo">
				<a href="http://jspang.com/">技术胖-胜洪宇关注web前端技术</a>
				<p>前端免费视频第一博客。</p>
			</div><!-- /.text-logo -->
			</div><!-- /.header-top -->

	<nav class="main-menu">
		<div class="container">
			<div class="row">
				<div class="col-md-12">
					<div id="navigation-wrapper">
						<ul id="menu-%e9%a1%b6%e9%83%a8%e8%8f%9c%e5%8d%95" class="top-menu"><li id="menu-item-1192" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-home menu-item-1192"><a href="http://jspang.com">首页</a></li>
<li id="menu-item-1186" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-1186"><a href="http://jspang.com/category/webnote/">前端日记</a></li>
<li id="menu-item-1188" class="menu-item menu-item-type-taxonomy menu-item-object-category current-post-ancestor menu-item-1188"><a href="http://jspang.com/category/learn/">视频教程</a></li>
<li id="menu-item-1187" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-1187"><a href="http://jspang.com/category/python%e9%85%92%e5%90%a7/">Python酒吧</a></li>
<li id="menu-item-1292" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1292"><a href="http://blog.jspang.com">大胖逼逼叨</a></li>
<li id="menu-item-1189" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-1189"><a href="http://jspang.com/category/uncategorized/">读书笔记</a></li>
<li id="menu-item-1190" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-1190"><a href="http://jspang.com/category/live/">生活趣事</a></li>
<li id="menu-item-1191" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1191"><a href="http://jspang.com/resume/">自我介绍</a></li>
<li id="menu-item-1291" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1291"><a href="http://jspang.com/navbar/">前端导航</a></li>
</ul>					</div>
					<div class="menu-mobile"></div>
				</div>
			</div>
		</div>
	</nav><!-- /.main-menu -->

</header><!-- /.header -->

<div class="container main-content">
	<div class="row">
		<div class="col-md-8">
			
				<article id="post-1461" class="post-1461 post type-post status-publish format-standard has-post-thumbnail hentry category-vue2 tag-vue">
            <!--
        <div class="thumbnails">
            <img width="361" height="339" src="style/images/vue-router2.jpg" class="post-thumbnail img-responsive wp-post-image" alt="" srcset="http://jspang.com/wp-content/uploads/2017/04/vue-router2.jpg 361w, http://jspang.com/wp-content/uploads/2017/04/vue-router2-300x282.jpg 300w" sizes="(max-width: 361px) 100vw, 361px" />        </div>
        -->
    
    <div class="padding-content">
        <header class="entry-header">
            <h2 class="entry-title">技术胖的Vue-router视频教程</h2>        </header> <!--/.entry-header -->
        
                <div class="entry-meta">
            		<ul class="list-inline">
			<li>
                <span class="author vcard">
                    By <a class="url fn n" href="http://jspang.com/author/jspang001/">技术胖</a>                </span>
			</li>

			<li>/</li>

			<li>
				<span class="posted-on"><time class="entry-date published" datetime="2017-04-13T15:54:38+00:00">2017年4月13日</time><time class="updated hidden" datetime="2017-05-22T08:27:34+00:00">2017年5月22日</time></span>
			</li>
		</ul>
		        </div><!-- .entry-meta -->
                        <div class="entry-content">
            <div id="toc_container" class="toc_wrap_right have_bullets"><p class="toc_title">目录</p><ul class="toc_list"><li><a href="#1vue-router">第1节：Vue-router入门</a></li><li><a href="#2vue-router">第2节：vue-router配置子路由</a></li><li><a href="#3vue-router">第3节：vue-router如何参数传递</a></li><li><a href="#4">第4节：单页面多路由区域操作</a></li><li><a href="#5vue-router-url">第5节：vue-router 利用url传递参数</a></li><li><a href="#6vue-router-redirect">第6节：vue-router 的重定向-redirect</a></li><li><a href="#7alias">第7节：alias别名的使用</a></li><li><a href="#8">第8节：路由的过渡动画</a></li><li><a href="#9mode404">第9节：mode的设置和404页面的处理</a></li><li><a href="#10">第10节：路由中的钩子</a></li><li><a href="#11">第11节：编程式导航</a></li></ul></div>
<h3></h3>
<h3>简介：</h3>
<p>由于Vue在开发时对路由支持的不足，后来官方补充了vue-router插件，它在Vue的生态环境中非常重要，在实际开发中只要编写一个页面就会操作vue-router。要学习vue-router就要先知道这里的路由是什么？这里的路由并不是指我们平时所说的硬件路由器，这里的路由就是SPA（单页应用）的路径管理器。再通俗的说，vue-router就是我们WebApp的链接路径管理系统。</p>
<p>有的小伙伴会有疑虑，为什么我们不能像原来一样直接用&lt;a&gt;&lt;/a&gt;标签编写链接哪？因为我们用Vue作的都是单页应用，就相当于只有一个主的index.html页面，所以你写的&lt;a&gt;&lt;/a&gt;标签是不起作用的，你必须使用vue-router来进行管理。</p>
<p>如果你在学习中有什么疑问，欢迎您在博客中留言，或者加入<span style="color: #ff6600;">Q群：364140450</span>，有很多Vue的高手在群里互动。</p>
<p>课程目录：</p>
<ul>
<li><a href="#1">第1节：Vue-router入门</a></li>
<li><a href="#2">第2节：vue-router 配置子路由</a></li>
<li><a href="#3">第3节：vue-router如何参数传递</a></li>
<li><a href="#4">第4节：单页面多路由区域操作</a></li>
<li><a href="#5">第5节：vue-router 利用url传递参数</a></li>
<li><a href="#6">第6节：vue-router重新定向</a></li>
<li><a href="#7">第7节：alias别名的使用</a></li>
<li><a href="#8">第8节：路由过渡动画</a></li>
<li><a href="#9">第9节：mode的作用和404页面的处理</a></li>
<li><a href="#10">第10节：路由中的钩子函数</a></li>
<li><a href="#11">第11节：vue-router编程式导航</a></li>
</ul>
<p>&nbsp;</p>
<h2><span id="1vue-router"><a name="1"></a><span style="color: #ff6600;">第1节：Vue-router入门</span></span></h2>
<div class="smartideo">
<div class="player">
                    <iframe src="//v.qq.com/iframe/player.html?vid=b0393z46qf7&#038;auto=0" width="100%" height="100%" frameborder="0" allowfullscreen="true"></iframe>
                </div>
</div>
<h3></h3>
<h3>安装vue-router</h3>
<p>vue-router是一个插件包，所以我们还是需要用npm来进行安装的。打开命令行工具，进入你的项目目录，输入下面命令。</p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->

		<div id="crayon-59f7036a4d04b210246517" class="crayon-syntax crayon-theme-github crayon-font-droid-sans-mono crayon-os-mac print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
		
			<div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;">
npm install vue-router --save-dev</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-59f7036a4d04b210246517-1">1</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-59f7036a4d04b210246517-1"><span class="crayon-e">npm </span><span class="crayon-e">install </span><span class="crayon-v">vue</span><span class="crayon-o">-</span><span class="crayon-v">router</span><span class="crayon-h"> </span><span class="crayon-o">--</span><span class="crayon-v">save</span><span class="crayon-o">-</span><span class="crayon-v">dev</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>
<!-- [Format Time: 0.0008 seconds] -->
<p>如果你安装很慢，也可以用cnpm进行安装，如果你在使用vue-cli中已经选择安装了vue-router，那这里不需要重复安装了。</p>
<h3>解读router/index.js文件</h3>
<p>我们用vue-cli生产了我们的项目结构，你可以在src/router/index.js文件，这个文件就是路由的核心文件，我们先解读一下它。如果你还不会使用vue-cli，我正好有一套课程是专门讲vue-cli的，你可以学习一下《<a href="http://jspang.com/2017/04/10/vue-cli/">技术胖的Vue-cli视频教程</a>》。</p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->

		<div id="crayon-59f7036a4d05b863900111" class="crayon-syntax crayon-theme-github crayon-font-droid-sans-mono crayon-os-mac print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
		
			<div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;">
import Vue from 'vue'   //引入Vue
import Router from 'vue-router'  //引入vue-router
import Hello from '@/components/Hello'  //引入根目录下的Hello.vue组件

Vue.use(Router)  //Vue全局使用Router

export default new Router({
  routes: [              //配置路由，这里是个数组
    {                    //每一个链接都是一个对象
      path: '/',         //链接路径
      name: 'Hello',     //路由名称，
      component: Hello   //对应的组件模板
    }
  ]
})</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-59f7036a4d05b863900111-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f7036a4d05b863900111-2">2</div><div class="crayon-num" data-line="crayon-59f7036a4d05b863900111-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f7036a4d05b863900111-4">4</div><div class="crayon-num" data-line="crayon-59f7036a4d05b863900111-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f7036a4d05b863900111-6">6</div><div class="crayon-num" data-line="crayon-59f7036a4d05b863900111-7">7</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f7036a4d05b863900111-8">8</div><div class="crayon-num" data-line="crayon-59f7036a4d05b863900111-9">9</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f7036a4d05b863900111-10">10</div><div class="crayon-num" data-line="crayon-59f7036a4d05b863900111-11">11</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f7036a4d05b863900111-12">12</div><div class="crayon-num" data-line="crayon-59f7036a4d05b863900111-13">13</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f7036a4d05b863900111-14">14</div><div class="crayon-num" data-line="crayon-59f7036a4d05b863900111-15">15</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-59f7036a4d05b863900111-1"><span class="crayon-e">import </span><span class="crayon-e">Vue </span><span class="crayon-i">from</span><span class="crayon-h"> </span><span class="crayon-s">'vue'</span><span class="crayon-h">&nbsp;&nbsp; </span><span class="crayon-c">//引入Vue</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f7036a4d05b863900111-2"><span class="crayon-e">import </span><span class="crayon-e">Router </span><span class="crayon-i">from</span><span class="crayon-h"> </span><span class="crayon-s">'vue-router'</span><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-c">//引入vue-router</span></div><div class="crayon-line" id="crayon-59f7036a4d05b863900111-3"><span class="crayon-e">import </span><span class="crayon-e">Hello </span><span class="crayon-i">from</span><span class="crayon-h"> </span><span class="crayon-s">'@/components/Hello'</span><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-c">//引入根目录下的Hello.vue组件</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f7036a4d05b863900111-4">&nbsp;</div><div class="crayon-line" id="crayon-59f7036a4d05b863900111-5"><span class="crayon-v">Vue</span><span class="crayon-sy">.</span><span class="crayon-st">use</span><span class="crayon-sy">(</span><span class="crayon-v">Router</span><span class="crayon-sy">)</span><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-c">//Vue全局使用Router</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f7036a4d05b863900111-6">&nbsp;</div><div class="crayon-line" id="crayon-59f7036a4d05b863900111-7"><span class="crayon-e">export</span><span class="crayon-h"> </span><span class="crayon-st">default</span><span class="crayon-h"> </span><span class="crayon-r">new</span><span class="crayon-h"> </span><span class="crayon-e">Router</span><span class="crayon-sy">(</span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f7036a4d05b863900111-8"><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-v">routes</span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-sy">[</span><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-c">//配置路由，这里是个数组</span></div><div class="crayon-line" id="crayon-59f7036a4d05b863900111-9"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-sy">{</span><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-c">//每一个链接都是一个对象</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f7036a4d05b863900111-10"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-v">path</span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-s">'/'</span><span class="crayon-sy">,</span><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span><span class="crayon-c">//链接路径</span></div><div class="crayon-line" id="crayon-59f7036a4d05b863900111-11"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-v">name</span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-s">'Hello'</span><span class="crayon-sy">,</span><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp; </span><span class="crayon-c">//路由名称，</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f7036a4d05b863900111-12"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-v">component</span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-v">Hello</span><span class="crayon-h">&nbsp;&nbsp; </span><span class="crayon-c">//对应的组件模板</span></div><div class="crayon-line" id="crayon-59f7036a4d05b863900111-13"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-sy">}</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f7036a4d05b863900111-14"><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-sy">]</span></div><div class="crayon-line" id="crayon-59f7036a4d05b863900111-15"><span class="crayon-sy">}</span><span class="crayon-sy">)</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>
<!-- [Format Time: 0.0029 seconds] -->
<p>上边的代码中已经对每行都进行了注释，其实在这个路由文件里只配置了一个功能，就是在进入项目时，显示Hello.vue里边的内容代码。</p>
<h3>增加一个Hi的路由和页面</h3>
<p>对路由的核心文件熟悉后，我们试着增加一个路由配置，我们希望在地址栏输入  <span style="color: #ff6600;">http://localhost:8080/#/hi</span>   的时候出现一个新的页面，先来看一下我们希望得到的效果。</p>
<p><img class="alignnone size-thumbnail" src="style/images/20170412093454.png" width="649" height="487" /></p>
<p>看到了效果，我们看一下具体的操作步骤：</p>
<ul>
<li>在src/components目录下，新建 Hi.vue 文件。</li>
<li>编写文件内容，和我们之前讲过的一样，文件要包括三个部分&lt;template&gt;&lt;script&gt;和&lt;style&gt;。文件很简单，只是打印一句话。<br />
<!-- Crayon Syntax Highlighter v_2.7.2_beta -->

		<div id="crayon-59f7036a4d063859407821" class="crayon-syntax crayon-theme-github crayon-font-droid-sans-mono crayon-os-mac print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
		
			<div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;">
&lt;template&gt;
  &lt;div class="hello"&gt;
    &lt;h1&gt;{{ msg }}&lt;/h1&gt;
  &lt;/div&gt;
&lt;/template&gt;

&lt;script&gt;
export default {
  name: 'hi',
  data () {
    return {
      msg: 'Hi, I am JSPang'
    }
  }
}
&lt;/script&gt;


&lt;style scoped&gt;

&lt;/style&gt;</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-59f7036a4d063859407821-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f7036a4d063859407821-2">2</div><div class="crayon-num" data-line="crayon-59f7036a4d063859407821-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f7036a4d063859407821-4">4</div><div class="crayon-num" data-line="crayon-59f7036a4d063859407821-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f7036a4d063859407821-6">6</div><div class="crayon-num" data-line="crayon-59f7036a4d063859407821-7">7</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f7036a4d063859407821-8">8</div><div class="crayon-num" data-line="crayon-59f7036a4d063859407821-9">9</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f7036a4d063859407821-10">10</div><div class="crayon-num" data-line="crayon-59f7036a4d063859407821-11">11</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f7036a4d063859407821-12">12</div><div class="crayon-num" data-line="crayon-59f7036a4d063859407821-13">13</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f7036a4d063859407821-14">14</div><div class="crayon-num" data-line="crayon-59f7036a4d063859407821-15">15</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f7036a4d063859407821-16">16</div><div class="crayon-num" data-line="crayon-59f7036a4d063859407821-17">17</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f7036a4d063859407821-18">18</div><div class="crayon-num" data-line="crayon-59f7036a4d063859407821-19">19</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f7036a4d063859407821-20">20</div><div class="crayon-num" data-line="crayon-59f7036a4d063859407821-21">21</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-59f7036a4d063859407821-1"><span class="crayon-r ">&lt;template&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f7036a4d063859407821-2"><span class="crayon-i ">&nbsp;&nbsp;</span><span class="crayon-r ">&lt;div </span><span class="crayon-e ">class</span><span class="crayon-o">=</span><span class="crayon-s ">"hello"</span><span class="crayon-r ">&gt;</span></div><div class="crayon-line" id="crayon-59f7036a4d063859407821-3"><span class="crayon-i ">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-r ">&lt;h1&gt;</span><span class="crayon-i ">{{ msg }}</span><span class="crayon-r ">&lt;/h1&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f7036a4d063859407821-4"><span class="crayon-i ">&nbsp;&nbsp;</span><span class="crayon-r ">&lt;/div&gt;</span></div><div class="crayon-line" id="crayon-59f7036a4d063859407821-5"><span class="crayon-r ">&lt;/template&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f7036a4d063859407821-6">&nbsp;</div><div class="crayon-line" id="crayon-59f7036a4d063859407821-7"><span class="crayon-ta">&lt;script&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f7036a4d063859407821-8"><span class="crayon-e">export</span><span class="crayon-h"> </span><span class="crayon-st">default</span><span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-59f7036a4d063859407821-9"><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-v">name</span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-s">'hi'</span><span class="crayon-sy">,</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f7036a4d063859407821-10"><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-e">data</span><span class="crayon-h"> </span><span class="crayon-sy">(</span><span class="crayon-sy">)</span><span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-59f7036a4d063859407821-11"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-st">return</span><span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f7036a4d063859407821-12"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-v">msg</span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-s">'Hi, I am JSPang'</span></div><div class="crayon-line" id="crayon-59f7036a4d063859407821-13"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-sy">}</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f7036a4d063859407821-14"><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-sy">}</span></div><div class="crayon-line" id="crayon-59f7036a4d063859407821-15"><span class="crayon-sy">}</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f7036a4d063859407821-16"><span class="crayon-ta">&lt;/script&gt;</span></div><div class="crayon-line" id="crayon-59f7036a4d063859407821-17">&nbsp;</div><div class="crayon-line crayon-striped-line" id="crayon-59f7036a4d063859407821-18">&nbsp;</div><div class="crayon-line" id="crayon-59f7036a4d063859407821-19"><span class="crayon-ta">&lt;style </span><span class="crayon-i ">scoped&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f7036a4d063859407821-20">&nbsp;</div><div class="crayon-line" id="crayon-59f7036a4d063859407821-21"><span class="crayon-ta">&lt;/style&gt;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>
<!-- [Format Time: 0.0036 seconds] -->

</li>
<li>引入 Hi组件：我们在router/index.js文件的上边引入Hi组件<br />
<!-- Crayon Syntax Highlighter v_2.7.2_beta -->

		<div id="crayon-59f7036a4d068705634367" class="crayon-syntax crayon-theme-github crayon-font-droid-sans-mono crayon-os-mac print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
		
			<div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;">
import Hi from '@/components/Hi'</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-59f7036a4d068705634367-1">1</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-59f7036a4d068705634367-1"><span class="crayon-e">import </span><span class="crayon-e">Hi </span><span class="crayon-i">from</span><span class="crayon-h"> </span><span class="crayon-s">'@/components/Hi'</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>
<!-- [Format Time: 0.0004 seconds] -->

</li>
<li>增加路由配置：在router/index.js文件的routes[]数组中，新增加一个对象，代码如下。<br />
<!-- Crayon Syntax Highlighter v_2.7.2_beta -->

		<div id="crayon-59f7036a4d06d586228382" class="crayon-syntax crayon-theme-github crayon-font-droid-sans-mono crayon-os-mac print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
		
			<div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;">
{
  path:'/hi',
  name:'Hi',
  component:Hi
}</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-59f7036a4d06d586228382-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f7036a4d06d586228382-2">2</div><div class="crayon-num" data-line="crayon-59f7036a4d06d586228382-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f7036a4d06d586228382-4">4</div><div class="crayon-num" data-line="crayon-59f7036a4d06d586228382-5">5</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-59f7036a4d06d586228382-1"><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f7036a4d06d586228382-2"><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-v">path</span><span class="crayon-o">:</span><span class="crayon-s">'/hi'</span><span class="crayon-sy">,</span></div><div class="crayon-line" id="crayon-59f7036a4d06d586228382-3"><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-v">name</span><span class="crayon-o">:</span><span class="crayon-s">'Hi'</span><span class="crayon-sy">,</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f7036a4d06d586228382-4"><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-v">component</span><span class="crayon-o">:</span><span class="crayon-i">Hi</span></div><div class="crayon-line" id="crayon-59f7036a4d06d586228382-5"><span class="crayon-sy">}</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>
<!-- [Format Time: 0.0007 seconds] -->

</li>
</ul>
<p>通过上面的配置已经可以增加一个新的页面了。是不是觉的自己的Vue功力一下子就提升了一个档次。为了方便小伙伴查看，贴出现在的路由配置文件:</p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->

		<div id="crayon-59f7036a4d09a401785988" class="crayon-syntax crayon-theme-github crayon-font-droid-sans-mono crayon-os-mac print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
		
			<div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;">
import Vue from 'vue'   //引入Vue
import Router from 'vue-router'  //引入vue-router
import Hello from '@/components/Hello'  //引入根目录下的Hello.vue组件
import Hi from '@/components/Hi' 

Vue.use(Router)  //Vue全局使用Router

export default new Router({
  routes: [              //配置路由，这里是个数组
    {                    //每一个链接都是一个对象
      path: '/',         //链接路径
      name: 'Hello',     //路由名称，
      component: Hello   //对应的组件模板
    },{
      path:'/hi',
      name:'Hi',
      component:Hi
    }
  ]
})</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-59f7036a4d09a401785988-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f7036a4d09a401785988-2">2</div><div class="crayon-num" data-line="crayon-59f7036a4d09a401785988-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f7036a4d09a401785988-4">4</div><div class="crayon-num" data-line="crayon-59f7036a4d09a401785988-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f7036a4d09a401785988-6">6</div><div class="crayon-num" data-line="crayon-59f7036a4d09a401785988-7">7</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f7036a4d09a401785988-8">8</div><div class="crayon-num" data-line="crayon-59f7036a4d09a401785988-9">9</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f7036a4d09a401785988-10">10</div><div class="crayon-num" data-line="crayon-59f7036a4d09a401785988-11">11</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f7036a4d09a401785988-12">12</div><div class="crayon-num" data-line="crayon-59f7036a4d09a401785988-13">13</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f7036a4d09a401785988-14">14</div><div class="crayon-num" data-line="crayon-59f7036a4d09a401785988-15">15</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f7036a4d09a401785988-16">16</div><div class="crayon-num" data-line="crayon-59f7036a4d09a401785988-17">17</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f7036a4d09a401785988-18">18</div><div class="crayon-num" data-line="crayon-59f7036a4d09a401785988-19">19</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f7036a4d09a401785988-20">20</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-59f7036a4d09a401785988-1"><span class="crayon-e">import </span><span class="crayon-e">Vue </span><span class="crayon-i">from</span><span class="crayon-h"> </span><span class="crayon-s">'vue'</span><span class="crayon-h">&nbsp;&nbsp; </span><span class="crayon-c">//引入Vue</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f7036a4d09a401785988-2"><span class="crayon-e">import </span><span class="crayon-e">Router </span><span class="crayon-i">from</span><span class="crayon-h"> </span><span class="crayon-s">'vue-router'</span><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-c">//引入vue-router</span></div><div class="crayon-line" id="crayon-59f7036a4d09a401785988-3"><span class="crayon-e">import </span><span class="crayon-e">Hello </span><span class="crayon-i">from</span><span class="crayon-h"> </span><span class="crayon-s">'@/components/Hello'</span><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-c">//引入根目录下的Hello.vue组件</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f7036a4d09a401785988-4"><span class="crayon-e">import </span><span class="crayon-e">Hi </span><span class="crayon-i">from</span><span class="crayon-h"> </span><span class="crayon-s">'@/components/Hi'</span><span class="crayon-h"> </span></div><div class="crayon-line" id="crayon-59f7036a4d09a401785988-5">&nbsp;</div><div class="crayon-line crayon-striped-line" id="crayon-59f7036a4d09a401785988-6"><span class="crayon-v">Vue</span><span class="crayon-sy">.</span><span class="crayon-st">use</span><span class="crayon-sy">(</span><span class="crayon-v">Router</span><span class="crayon-sy">)</span><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-c">//Vue全局使用Router</span></div><div class="crayon-line" id="crayon-59f7036a4d09a401785988-7">&nbsp;</div><div class="crayon-line crayon-striped-line" id="crayon-59f7036a4d09a401785988-8"><span class="crayon-e">export</span><span class="crayon-h"> </span><span class="crayon-st">default</span><span class="crayon-h"> </span><span class="crayon-r">new</span><span class="crayon-h"> </span><span class="crayon-e">Router</span><span class="crayon-sy">(</span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-59f7036a4d09a401785988-9"><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-v">routes</span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-sy">[</span><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-c">//配置路由，这里是个数组</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f7036a4d09a401785988-10"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-sy">{</span><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-c">//每一个链接都是一个对象</span></div><div class="crayon-line" id="crayon-59f7036a4d09a401785988-11"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-v">path</span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-s">'/'</span><span class="crayon-sy">,</span><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span><span class="crayon-c">//链接路径</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f7036a4d09a401785988-12"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-v">name</span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-s">'Hello'</span><span class="crayon-sy">,</span><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp; </span><span class="crayon-c">//路由名称，</span></div><div class="crayon-line" id="crayon-59f7036a4d09a401785988-13"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-v">component</span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-v">Hello</span><span class="crayon-h">&nbsp;&nbsp; </span><span class="crayon-c">//对应的组件模板</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f7036a4d09a401785988-14"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-sy">}</span><span class="crayon-sy">,</span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-59f7036a4d09a401785988-15"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-v">path</span><span class="crayon-o">:</span><span class="crayon-s">'/hi'</span><span class="crayon-sy">,</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f7036a4d09a401785988-16"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-v">name</span><span class="crayon-o">:</span><span class="crayon-s">'Hi'</span><span class="crayon-sy">,</span></div><div class="crayon-line" id="crayon-59f7036a4d09a401785988-17"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-v">component</span><span class="crayon-o">:</span><span class="crayon-i">Hi</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f7036a4d09a401785988-18"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-sy">}</span></div><div class="crayon-line" id="crayon-59f7036a4d09a401785988-19"><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-sy">]</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f7036a4d09a401785988-20"><span class="crayon-sy">}</span><span class="crayon-sy">)</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>
<!-- [Format Time: 0.0034 seconds] -->
<p></p>
<h3>router-link制作导航</h3>
<p>现在通过在地址栏改变字符串地址，已经可以实现页面内容的变化了。这并不满足需求，我们需要的是在页面上有个像样的导航链接，我们只要点击就可以实现页面内容的变化。制作链接需要&lt;router-link&gt;标签，我们先来看一下它的语法。</p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->

		<div id="crayon-59f7036a4d0a0967481921" class="crayon-syntax crayon-theme-github crayon-font-droid-sans-mono crayon-os-mac print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
		
			<div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;">
 &lt;router-link to="/"&gt;[显示字段]&lt;/router-link&gt;</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-59f7036a4d0a0967481921-1">1</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-59f7036a4d0a0967481921-1"><span class="crayon-h"> </span><span class="crayon-o">&lt;</span><span class="crayon-v">router</span><span class="crayon-o">-</span><span class="crayon-e">link </span><span class="crayon-st">to</span><span class="crayon-o">=</span><span class="crayon-s">"/"</span><span class="crayon-o">&gt;</span><span class="crayon-sy">[</span>显示字段<span class="crayon-sy">]</span><span class="crayon-o">&lt;</span><span class="crayon-o">/</span><span class="crayon-v">router</span><span class="crayon-o">-</span><span class="crayon-v">link</span><span class="crayon-o">&gt;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>
<!-- [Format Time: 0.0007 seconds] -->
<p></p>
<ul>
<li><strong>to：</strong>是我们的导航路径，要填写的是你在router/index.js文件里配置的path值，如果要导航到默认首页，只需要写成  to=&#8221;/&#8221;  ，</li>
<li><strong>[显示字段] ：</strong>就是我们要显示给用户的导航名称，比如首页  新闻页。</li>
</ul>
<p>明白了router-link的基本语法，我们在 src/App.vue文件中的template里加入下面代码，实现导航。</p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->

		<div id="crayon-59f7036a4d0a6087194641" class="crayon-syntax crayon-theme-github crayon-font-droid-sans-mono crayon-os-mac print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
		
			<div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;">
&lt;p&gt;导航 ：
   &lt;router-link to="/"&gt;首页&lt;/router-link&gt;
   &lt;router-link to="/hi"&gt;Hi页面&lt;/router-link&gt;
&lt;/p&gt;</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-59f7036a4d0a6087194641-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f7036a4d0a6087194641-2">2</div><div class="crayon-num" data-line="crayon-59f7036a4d0a6087194641-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f7036a4d0a6087194641-4">4</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-59f7036a4d0a6087194641-1"><span class="crayon-o">&lt;</span><span class="crayon-v">p</span><span class="crayon-o">&gt;</span>导航<span class="crayon-h"> </span>：</div><div class="crayon-line crayon-striped-line" id="crayon-59f7036a4d0a6087194641-2"><span class="crayon-h">&nbsp;&nbsp; </span><span class="crayon-o">&lt;</span><span class="crayon-v">router</span><span class="crayon-o">-</span><span class="crayon-e">link </span><span class="crayon-st">to</span><span class="crayon-o">=</span><span class="crayon-s">"/"</span><span class="crayon-o">&gt;</span>首页<span class="crayon-o">&lt;</span><span class="crayon-o">/</span><span class="crayon-v">router</span><span class="crayon-o">-</span><span class="crayon-v">link</span><span class="crayon-o">&gt;</span></div><div class="crayon-line" id="crayon-59f7036a4d0a6087194641-3"><span class="crayon-h">&nbsp;&nbsp; </span><span class="crayon-o">&lt;</span><span class="crayon-v">router</span><span class="crayon-o">-</span><span class="crayon-e">link </span><span class="crayon-st">to</span><span class="crayon-o">=</span><span class="crayon-s">"/hi"</span><span class="crayon-o">&gt;</span><span class="crayon-i">Hi</span>页面<span class="crayon-o">&lt;</span><span class="crayon-o">/</span><span class="crayon-v">router</span><span class="crayon-o">-</span><span class="crayon-v">link</span><span class="crayon-o">&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f7036a4d0a6087194641-4"><span class="crayon-o">&lt;</span><span class="crayon-o">/</span><span class="crayon-v">p</span><span class="crayon-o">&gt;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>
<!-- [Format Time: 0.0014 seconds] -->
<p>现在我们访问页面，发现已经多出了导航。</p>
<p><img class="alignnone size-thumbnail" src="style/images/20170412101827.png" width="649" height="494" /></p>
<p>总结：这节课我们在vue-cli的构建下对vue-router有了一个基本的了解，学会了vue-router的核心文件的基本结构，学会了如何添加一个新的模板页面，还学会了用&lt;router-link&gt;标签设置导航。在这里我必须要再强调一遍，路由是Vue中最重点的内容，你必须完全掌握学会。你可以先听一遍视频教程，然后跟着文字教程来作你的练习。一步一个脚印，我们都会成为Vue大神的，小伙伴们加油了！！！</p>
<hr />
<h2><span id="2vue-router"><a name="2"></a><span style="color: #ff6600;">第2节：vue-router配置子路由</span></span></h2>
<div class="smartideo">
<div class="player">
                    <iframe src="//v.qq.com/iframe/player.html?vid=t03930fxftf&#038;auto=0" width="100%" height="100%" frameborder="0" allowfullscreen="true"></iframe>
                </div>
</div>
<p>我们上节课初步了解Vue-router的初步知识，也学会了基本的跳转，那我们这节课学习一下子菜单的路由方式，也叫子路由。子路由的情况一般用在一个页面有他的基础模版，然后它下面的页面都隶属于这个模版，只是部分改变样式。我们接着第一节课的实例，在Hi页面的下面新建两个子页面，分别是 “Hi页面1” 和 “Hi页面2”，来实现子路由。</p>
<h3>一、改造App.vue的导航代码</h3>
<p>我们需要先改造app.vue的导航代码，来实现基本的导航功能。我们用&lt;router-link&gt;标签增加了两个新的导航链接。</p>
<h4>App.vue代码</h4>
<p></p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->

		<div id="crayon-59f7036a4d0ad405937829" class="crayon-syntax crayon-theme-github crayon-font-droid-sans-mono crayon-os-mac print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
		
			<div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;">
&lt;p&gt;导航 ：
      &lt;router-link to="/"&gt;首页&lt;/router-link&gt; | 
      &lt;router-link to="/hi"&gt;Hi页面&lt;/router-link&gt; |
      &lt;router-link to="/hi/hi1"&gt;-Hi页面1&lt;/router-link&gt; |
      &lt;router-link to="/hi/hi2"&gt;-Hi页面2&lt;/router-link&gt;
&lt;/p&gt;</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-59f7036a4d0ad405937829-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f7036a4d0ad405937829-2">2</div><div class="crayon-num" data-line="crayon-59f7036a4d0ad405937829-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f7036a4d0ad405937829-4">4</div><div class="crayon-num" data-line="crayon-59f7036a4d0ad405937829-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f7036a4d0ad405937829-6">6</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-59f7036a4d0ad405937829-1"><span class="crayon-r ">&lt;p&gt;</span><span class="crayon-i ">导航 ：</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f7036a4d0ad405937829-2"><span class="crayon-i ">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-r ">&lt;router-link </span><span class="crayon-e ">to</span><span class="crayon-o">=</span><span class="crayon-s ">"/"</span><span class="crayon-r ">&gt;</span><span class="crayon-i ">首页</span><span class="crayon-r ">&lt;/router-link&gt;</span><span class="crayon-i "> | </span></div><div class="crayon-line" id="crayon-59f7036a4d0ad405937829-3"><span class="crayon-i ">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-r ">&lt;router-link </span><span class="crayon-e ">to</span><span class="crayon-o">=</span><span class="crayon-s ">"/hi"</span><span class="crayon-r ">&gt;</span><span class="crayon-i ">Hi页面</span><span class="crayon-r ">&lt;/router-link&gt;</span><span class="crayon-i "> |</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f7036a4d0ad405937829-4"><span class="crayon-i ">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-r ">&lt;router-link </span><span class="crayon-e ">to</span><span class="crayon-o">=</span><span class="crayon-s ">"/hi/hi1"</span><span class="crayon-r ">&gt;</span><span class="crayon-i ">-Hi页面1</span><span class="crayon-r ">&lt;/router-link&gt;</span><span class="crayon-i "> |</span></div><div class="crayon-line" id="crayon-59f7036a4d0ad405937829-5"><span class="crayon-i ">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-r ">&lt;router-link </span><span class="crayon-e ">to</span><span class="crayon-o">=</span><span class="crayon-s ">"/hi/hi2"</span><span class="crayon-r ">&gt;</span><span class="crayon-i ">-Hi页面2</span><span class="crayon-r ">&lt;/router-link&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f7036a4d0ad405937829-6"><span class="crayon-r ">&lt;/p&gt;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>
<!-- [Format Time: 0.0011 seconds] -->
<p>这时候我们再访问主页的时候导航栏就发生了变化。多出了两个自导航：Hi页面1  和 Hi页面2</p>
<p><img class="alignnone size-thumbnail" src="style/images/20170414142843.png" width="649" height="470" /></p>
<h3>二、改写components/Hi.vue页面</h3>
<p>把Hi.vue改成一个通用的模板，加入&lt;router-view&gt;标签，给子模板提供插入位置。“Hi页面1”   和 “Hi页面2”  都相当于“Hi页面”的子页面，有点想继承关系。我们在“Hi页面”里加入&lt;router-view&gt;标签。</p>
<h4>components/Hi.vue,就是第5行的代码，其他代码不变。</h4>
<p></p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->

		<div id="crayon-59f7036a4d0b3733403017" class="crayon-syntax crayon-theme-github crayon-font-droid-sans-mono crayon-os-mac print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
		
			<div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;">
&lt;template&gt;
  &lt;div class="hello"&gt;
    &lt;h1&gt;{{ msg }}&lt;/h1&gt;

    &lt;router-view class="aaa"&gt;&lt;/router-view&gt;
  &lt;/div&gt;
&lt;/template&gt;

&lt;script&gt;
export default {
  name: 'hi',
  data () {
    return {
      msg: 'Hi, I am JSPang'
    }
  }
}
&lt;/script&gt;
&lt;style scoped&gt;

&lt;/style&gt;</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-59f7036a4d0b3733403017-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f7036a4d0b3733403017-2">2</div><div class="crayon-num" data-line="crayon-59f7036a4d0b3733403017-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f7036a4d0b3733403017-4">4</div><div class="crayon-num crayon-marked-num crayon-top crayon-bottom" data-line="crayon-59f7036a4d0b3733403017-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f7036a4d0b3733403017-6">6</div><div class="crayon-num" data-line="crayon-59f7036a4d0b3733403017-7">7</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f7036a4d0b3733403017-8">8</div><div class="crayon-num" data-line="crayon-59f7036a4d0b3733403017-9">9</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f7036a4d0b3733403017-10">10</div><div class="crayon-num" data-line="crayon-59f7036a4d0b3733403017-11">11</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f7036a4d0b3733403017-12">12</div><div class="crayon-num" data-line="crayon-59f7036a4d0b3733403017-13">13</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f7036a4d0b3733403017-14">14</div><div class="crayon-num" data-line="crayon-59f7036a4d0b3733403017-15">15</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f7036a4d0b3733403017-16">16</div><div class="crayon-num" data-line="crayon-59f7036a4d0b3733403017-17">17</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f7036a4d0b3733403017-18">18</div><div class="crayon-num" data-line="crayon-59f7036a4d0b3733403017-19">19</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f7036a4d0b3733403017-20">20</div><div class="crayon-num" data-line="crayon-59f7036a4d0b3733403017-21">21</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-59f7036a4d0b3733403017-1"><span class="crayon-r ">&lt;template&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f7036a4d0b3733403017-2"><span class="crayon-i ">&nbsp;&nbsp;</span><span class="crayon-r ">&lt;div </span><span class="crayon-e ">class</span><span class="crayon-o">=</span><span class="crayon-s ">"hello"</span><span class="crayon-r ">&gt;</span></div><div class="crayon-line" id="crayon-59f7036a4d0b3733403017-3"><span class="crayon-i ">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-r ">&lt;h1&gt;</span><span class="crayon-i ">{{ msg }}</span><span class="crayon-r ">&lt;/h1&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f7036a4d0b3733403017-4">&nbsp;</div><div class="crayon-line crayon-marked-line crayon-top crayon-bottom" id="crayon-59f7036a4d0b3733403017-5"><span class="crayon-i ">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-r ">&lt;router-view </span><span class="crayon-e ">class</span><span class="crayon-o">=</span><span class="crayon-s ">"aaa"</span><span class="crayon-r ">&gt;</span><span class="crayon-r ">&lt;/router-view&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f7036a4d0b3733403017-6"><span class="crayon-i ">&nbsp;&nbsp;</span><span class="crayon-r ">&lt;/div&gt;</span></div><div class="crayon-line" id="crayon-59f7036a4d0b3733403017-7"><span class="crayon-r ">&lt;/template&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f7036a4d0b3733403017-8">&nbsp;</div><div class="crayon-line" id="crayon-59f7036a4d0b3733403017-9"><span class="crayon-ta">&lt;script&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f7036a4d0b3733403017-10"><span class="crayon-e">export</span><span class="crayon-h"> </span><span class="crayon-st">default</span><span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-59f7036a4d0b3733403017-11"><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-v">name</span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-s">'hi'</span><span class="crayon-sy">,</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f7036a4d0b3733403017-12"><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-e">data</span><span class="crayon-h"> </span><span class="crayon-sy">(</span><span class="crayon-sy">)</span><span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-59f7036a4d0b3733403017-13"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-st">return</span><span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f7036a4d0b3733403017-14"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-v">msg</span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-s">'Hi, I am JSPang'</span></div><div class="crayon-line" id="crayon-59f7036a4d0b3733403017-15"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-sy">}</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f7036a4d0b3733403017-16"><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-sy">}</span></div><div class="crayon-line" id="crayon-59f7036a4d0b3733403017-17"><span class="crayon-sy">}</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f7036a4d0b3733403017-18"><span class="crayon-ta">&lt;/script&gt;</span></div><div class="crayon-line" id="crayon-59f7036a4d0b3733403017-19"><span class="crayon-ta">&lt;style </span><span class="crayon-i ">scoped&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f7036a4d0b3733403017-20">&nbsp;</div><div class="crayon-line" id="crayon-59f7036a4d0b3733403017-21"><span class="crayon-ta">&lt;/style&gt;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>
<!-- [Format Time: 0.0020 seconds] -->
<p></p>
<h3>三、在components目录下新建两个组件模板 Hi1.vue 和 Hi2.vue</h3>
<p>新建的模板和Hi.vue没有太多的差别，知识改变了data中message的值，也就是输出的结果不太一样了。</p>
<p>Hi1.vue</p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->

		<div id="crayon-59f7036a4d0b9832682493" class="crayon-syntax crayon-theme-github crayon-font-droid-sans-mono crayon-os-mac print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
		
			<div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;">
&lt;template&gt;
  &lt;div class="hello"&gt;
    &lt;h1&gt;{{ msg }}&lt;/h1&gt;
  &lt;/div&gt;
&lt;/template&gt;
&lt;script&gt;
export default {
  name: 'hi',
  data () {
    return {
      msg: 'Hi, I am Hi1!'
    }
  }
}
&lt;/script&gt;
&lt;style scoped&gt;

&lt;/style&gt;</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-59f7036a4d0b9832682493-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f7036a4d0b9832682493-2">2</div><div class="crayon-num" data-line="crayon-59f7036a4d0b9832682493-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f7036a4d0b9832682493-4">4</div><div class="crayon-num" data-line="crayon-59f7036a4d0b9832682493-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f7036a4d0b9832682493-6">6</div><div class="crayon-num" data-line="crayon-59f7036a4d0b9832682493-7">7</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f7036a4d0b9832682493-8">8</div><div class="crayon-num" data-line="crayon-59f7036a4d0b9832682493-9">9</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f7036a4d0b9832682493-10">10</div><div class="crayon-num" data-line="crayon-59f7036a4d0b9832682493-11">11</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f7036a4d0b9832682493-12">12</div><div class="crayon-num" data-line="crayon-59f7036a4d0b9832682493-13">13</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f7036a4d0b9832682493-14">14</div><div class="crayon-num" data-line="crayon-59f7036a4d0b9832682493-15">15</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f7036a4d0b9832682493-16">16</div><div class="crayon-num" data-line="crayon-59f7036a4d0b9832682493-17">17</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f7036a4d0b9832682493-18">18</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-59f7036a4d0b9832682493-1"><span class="crayon-r ">&lt;template&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f7036a4d0b9832682493-2"><span class="crayon-i ">&nbsp;&nbsp;</span><span class="crayon-r ">&lt;div </span><span class="crayon-e ">class</span><span class="crayon-o">=</span><span class="crayon-s ">"hello"</span><span class="crayon-r ">&gt;</span></div><div class="crayon-line" id="crayon-59f7036a4d0b9832682493-3"><span class="crayon-i ">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-r ">&lt;h1&gt;</span><span class="crayon-i ">{{ msg }}</span><span class="crayon-r ">&lt;/h1&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f7036a4d0b9832682493-4"><span class="crayon-i ">&nbsp;&nbsp;</span><span class="crayon-r ">&lt;/div&gt;</span></div><div class="crayon-line" id="crayon-59f7036a4d0b9832682493-5"><span class="crayon-r ">&lt;/template&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f7036a4d0b9832682493-6"><span class="crayon-ta">&lt;script&gt;</span></div><div class="crayon-line" id="crayon-59f7036a4d0b9832682493-7"><span class="crayon-e">export</span><span class="crayon-h"> </span><span class="crayon-st">default</span><span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f7036a4d0b9832682493-8"><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-v">name</span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-s">'hi'</span><span class="crayon-sy">,</span></div><div class="crayon-line" id="crayon-59f7036a4d0b9832682493-9"><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-e">data</span><span class="crayon-h"> </span><span class="crayon-sy">(</span><span class="crayon-sy">)</span><span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f7036a4d0b9832682493-10"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-st">return</span><span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-59f7036a4d0b9832682493-11"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-v">msg</span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-s">'Hi, I am Hi1!'</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f7036a4d0b9832682493-12"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-sy">}</span></div><div class="crayon-line" id="crayon-59f7036a4d0b9832682493-13"><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-sy">}</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f7036a4d0b9832682493-14"><span class="crayon-sy">}</span></div><div class="crayon-line" id="crayon-59f7036a4d0b9832682493-15"><span class="crayon-ta">&lt;/script&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f7036a4d0b9832682493-16"><span class="crayon-ta">&lt;style </span><span class="crayon-i ">scoped&gt;</span></div><div class="crayon-line" id="crayon-59f7036a4d0b9832682493-17">&nbsp;</div><div class="crayon-line crayon-striped-line" id="crayon-59f7036a4d0b9832682493-18"><span class="crayon-ta">&lt;/style&gt;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>
<!-- [Format Time: 0.0017 seconds] -->
<p>Hi2.vue</p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->

		<div id="crayon-59f7036a4d0be400742938" class="crayon-syntax crayon-theme-github crayon-font-droid-sans-mono crayon-os-mac print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
		
			<div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;">
&lt;template&gt;
  &lt;div class="hello"&gt;
    &lt;h1&gt;{{ msg }}&lt;/h1&gt;
  &lt;/div&gt;
&lt;/template&gt;
&lt;script&gt;
export default {
  name: 'hi',
  data () {
    return {
      msg: 'Hi, I am Hi2'
    }
  }
}
&lt;/script&gt;
&lt;style scoped&gt;
&lt;/style&gt;</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-59f7036a4d0be400742938-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f7036a4d0be400742938-2">2</div><div class="crayon-num" data-line="crayon-59f7036a4d0be400742938-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f7036a4d0be400742938-4">4</div><div class="crayon-num" data-line="crayon-59f7036a4d0be400742938-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f7036a4d0be400742938-6">6</div><div class="crayon-num" data-line="crayon-59f7036a4d0be400742938-7">7</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f7036a4d0be400742938-8">8</div><div class="crayon-num" data-line="crayon-59f7036a4d0be400742938-9">9</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f7036a4d0be400742938-10">10</div><div class="crayon-num" data-line="crayon-59f7036a4d0be400742938-11">11</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f7036a4d0be400742938-12">12</div><div class="crayon-num" data-line="crayon-59f7036a4d0be400742938-13">13</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f7036a4d0be400742938-14">14</div><div class="crayon-num" data-line="crayon-59f7036a4d0be400742938-15">15</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f7036a4d0be400742938-16">16</div><div class="crayon-num" data-line="crayon-59f7036a4d0be400742938-17">17</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-59f7036a4d0be400742938-1"><span class="crayon-r ">&lt;template&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f7036a4d0be400742938-2"><span class="crayon-i ">&nbsp;&nbsp;</span><span class="crayon-r ">&lt;div </span><span class="crayon-e ">class</span><span class="crayon-o">=</span><span class="crayon-s ">"hello"</span><span class="crayon-r ">&gt;</span></div><div class="crayon-line" id="crayon-59f7036a4d0be400742938-3"><span class="crayon-i ">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-r ">&lt;h1&gt;</span><span class="crayon-i ">{{ msg }}</span><span class="crayon-r ">&lt;/h1&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f7036a4d0be400742938-4"><span class="crayon-i ">&nbsp;&nbsp;</span><span class="crayon-r ">&lt;/div&gt;</span></div><div class="crayon-line" id="crayon-59f7036a4d0be400742938-5"><span class="crayon-r ">&lt;/template&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f7036a4d0be400742938-6"><span class="crayon-ta">&lt;script&gt;</span></div><div class="crayon-line" id="crayon-59f7036a4d0be400742938-7"><span class="crayon-e">export</span><span class="crayon-h"> </span><span class="crayon-st">default</span><span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f7036a4d0be400742938-8"><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-v">name</span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-s">'hi'</span><span class="crayon-sy">,</span></div><div class="crayon-line" id="crayon-59f7036a4d0be400742938-9"><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-e">data</span><span class="crayon-h"> </span><span class="crayon-sy">(</span><span class="crayon-sy">)</span><span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f7036a4d0be400742938-10"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-st">return</span><span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-59f7036a4d0be400742938-11"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-v">msg</span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-s">'Hi, I am Hi2'</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f7036a4d0be400742938-12"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-sy">}</span></div><div class="crayon-line" id="crayon-59f7036a4d0be400742938-13"><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-sy">}</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f7036a4d0be400742938-14"><span class="crayon-sy">}</span></div><div class="crayon-line" id="crayon-59f7036a4d0be400742938-15"><span class="crayon-ta">&lt;/script&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f7036a4d0be400742938-16"><span class="crayon-ta">&lt;style </span><span class="crayon-i ">scoped&gt;</span></div><div class="crayon-line" id="crayon-59f7036a4d0be400742938-17"><span class="crayon-ta">&lt;/style&gt;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>
<!-- [Format Time: 0.0017 seconds] -->
<p></p>
<h3>四、修改router/index.js代码</h3>
<p>我们现在导航有了，母模板和子模板也有了，只要改变我们的路由配置文件就可以了。子路由的写法是在原有的路由配置下加入children字段。</p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->

		<div id="crayon-59f7036a4d0c3924417331" class="crayon-syntax crayon-theme-github crayon-font-droid-sans-mono crayon-os-mac print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
		
			<div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;">
children:[
{path:'/',component:xxx},
{path:'xx',component:xxx},
]</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-59f7036a4d0c3924417331-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f7036a4d0c3924417331-2">2</div><div class="crayon-num" data-line="crayon-59f7036a4d0c3924417331-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f7036a4d0c3924417331-4">4</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-59f7036a4d0c3924417331-1"><span class="crayon-v">children</span><span class="crayon-o">:</span><span class="crayon-sy">[</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f7036a4d0c3924417331-2"><span class="crayon-sy">{</span><span class="crayon-v">path</span><span class="crayon-o">:</span><span class="crayon-s">'/'</span><span class="crayon-sy">,</span><span class="crayon-v">component</span><span class="crayon-o">:</span><span class="crayon-v">xxx</span><span class="crayon-sy">}</span><span class="crayon-sy">,</span></div><div class="crayon-line" id="crayon-59f7036a4d0c3924417331-3"><span class="crayon-sy">{</span><span class="crayon-v">path</span><span class="crayon-o">:</span><span class="crayon-s">'xx'</span><span class="crayon-sy">,</span><span class="crayon-v">component</span><span class="crayon-o">:</span><span class="crayon-v">xxx</span><span class="crayon-sy">}</span><span class="crayon-sy">,</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f7036a4d0c3924417331-4"><span class="crayon-sy">]</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>
<!-- [Format Time: 0.0009 seconds] -->
<p>children字段后边跟的是个数组，数组里和其他配置路由基本相同，需要配置path和component。具体看一下这个子路由的配置写法。</p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->

		<div id="crayon-59f7036a4d0c8121240080" class="crayon-syntax crayon-theme-github crayon-font-droid-sans-mono crayon-os-mac print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
		
			<div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;">
import Vue from 'vue'   
import Router from 'vue-router'  
import Hello from '@/components/Hello'  
import Hi from '@/components/Hi' 
import Hi1 from '@/components/Hi1' 
import Hi2 from '@/components/Hi2' 

Vue.use(Router) 

export default new Router({
  routes: [             
    {                    
      path: '/',        
      name: 'Hello',     
      component: Hello   
    },{
      path:'/hi',
      component:Hi,
      children:[
        {path:'/',component:Hi},
        {path:'hi1',component:Hi1},
        {path:'hi2',component:Hi2},
      ]
    }
  ]
})</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-59f7036a4d0c8121240080-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f7036a4d0c8121240080-2">2</div><div class="crayon-num" data-line="crayon-59f7036a4d0c8121240080-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f7036a4d0c8121240080-4">4</div><div class="crayon-num" data-line="crayon-59f7036a4d0c8121240080-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f7036a4d0c8121240080-6">6</div><div class="crayon-num" data-line="crayon-59f7036a4d0c8121240080-7">7</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f7036a4d0c8121240080-8">8</div><div class="crayon-num" data-line="crayon-59f7036a4d0c8121240080-9">9</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f7036a4d0c8121240080-10">10</div><div class="crayon-num" data-line="crayon-59f7036a4d0c8121240080-11">11</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f7036a4d0c8121240080-12">12</div><div class="crayon-num" data-line="crayon-59f7036a4d0c8121240080-13">13</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f7036a4d0c8121240080-14">14</div><div class="crayon-num" data-line="crayon-59f7036a4d0c8121240080-15">15</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f7036a4d0c8121240080-16">16</div><div class="crayon-num" data-line="crayon-59f7036a4d0c8121240080-17">17</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f7036a4d0c8121240080-18">18</div><div class="crayon-num crayon-marked-num crayon-top" data-line="crayon-59f7036a4d0c8121240080-19">19</div><div class="crayon-num crayon-marked-num crayon-striped-num" data-line="crayon-59f7036a4d0c8121240080-20">20</div><div class="crayon-num crayon-marked-num" data-line="crayon-59f7036a4d0c8121240080-21">21</div><div class="crayon-num crayon-marked-num crayon-striped-num" data-line="crayon-59f7036a4d0c8121240080-22">22</div><div class="crayon-num crayon-marked-num crayon-bottom" data-line="crayon-59f7036a4d0c8121240080-23">23</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f7036a4d0c8121240080-24">24</div><div class="crayon-num" data-line="crayon-59f7036a4d0c8121240080-25">25</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f7036a4d0c8121240080-26">26</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-59f7036a4d0c8121240080-1"><span class="crayon-e">import </span><span class="crayon-e">Vue </span><span class="crayon-i">from</span><span class="crayon-h"> </span><span class="crayon-s">'vue'</span><span class="crayon-h">&nbsp;&nbsp; </span></div><div class="crayon-line crayon-striped-line" id="crayon-59f7036a4d0c8121240080-2"><span class="crayon-e">import </span><span class="crayon-e">Router </span><span class="crayon-i">from</span><span class="crayon-h"> </span><span class="crayon-s">'vue-router'</span><span class="crayon-h">&nbsp;&nbsp;</span></div><div class="crayon-line" id="crayon-59f7036a4d0c8121240080-3"><span class="crayon-e">import </span><span class="crayon-e">Hello </span><span class="crayon-i">from</span><span class="crayon-h"> </span><span class="crayon-s">'@/components/Hello'</span><span class="crayon-h">&nbsp;&nbsp;</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f7036a4d0c8121240080-4"><span class="crayon-e">import </span><span class="crayon-e">Hi </span><span class="crayon-i">from</span><span class="crayon-h"> </span><span class="crayon-s">'@/components/Hi'</span><span class="crayon-h"> </span></div><div class="crayon-line" id="crayon-59f7036a4d0c8121240080-5"><span class="crayon-e">import </span><span class="crayon-e">Hi1 </span><span class="crayon-i">from</span><span class="crayon-h"> </span><span class="crayon-s">'@/components/Hi1'</span><span class="crayon-h"> </span></div><div class="crayon-line crayon-striped-line" id="crayon-59f7036a4d0c8121240080-6"><span class="crayon-e">import </span><span class="crayon-e">Hi2 </span><span class="crayon-i">from</span><span class="crayon-h"> </span><span class="crayon-s">'@/components/Hi2'</span><span class="crayon-h"> </span></div><div class="crayon-line" id="crayon-59f7036a4d0c8121240080-7">&nbsp;</div><div class="crayon-line crayon-striped-line" id="crayon-59f7036a4d0c8121240080-8"><span class="crayon-v">Vue</span><span class="crayon-sy">.</span><span class="crayon-st">use</span><span class="crayon-sy">(</span><span class="crayon-v">Router</span><span class="crayon-sy">)</span><span class="crayon-h"> </span></div><div class="crayon-line" id="crayon-59f7036a4d0c8121240080-9">&nbsp;</div><div class="crayon-line crayon-striped-line" id="crayon-59f7036a4d0c8121240080-10"><span class="crayon-e">export</span><span class="crayon-h"> </span><span class="crayon-st">default</span><span class="crayon-h"> </span><span class="crayon-r">new</span><span class="crayon-h"> </span><span class="crayon-e">Router</span><span class="crayon-sy">(</span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-59f7036a4d0c8121240080-11"><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-v">routes</span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-sy">[</span><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span></div><div class="crayon-line crayon-striped-line" id="crayon-59f7036a4d0c8121240080-12"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-sy">{</span><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span></div><div class="crayon-line" id="crayon-59f7036a4d0c8121240080-13"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-v">path</span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-s">'/'</span><span class="crayon-sy">,</span><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f7036a4d0c8121240080-14"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-v">name</span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-s">'Hello'</span><span class="crayon-sy">,</span><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp; </span></div><div class="crayon-line" id="crayon-59f7036a4d0c8121240080-15"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-v">component</span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-i">Hello</span><span class="crayon-h">&nbsp;&nbsp; </span></div><div class="crayon-line crayon-striped-line" id="crayon-59f7036a4d0c8121240080-16"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-sy">}</span><span class="crayon-sy">,</span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-59f7036a4d0c8121240080-17"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-v">path</span><span class="crayon-o">:</span><span class="crayon-s">'/hi'</span><span class="crayon-sy">,</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f7036a4d0c8121240080-18"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-v">component</span><span class="crayon-o">:</span><span class="crayon-v">Hi</span><span class="crayon-sy">,</span></div><div class="crayon-line crayon-marked-line crayon-top" id="crayon-59f7036a4d0c8121240080-19"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-v">children</span><span class="crayon-o">:</span><span class="crayon-sy">[</span></div><div class="crayon-line crayon-marked-line crayon-striped-line" id="crayon-59f7036a4d0c8121240080-20"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-sy">{</span><span class="crayon-v">path</span><span class="crayon-o">:</span><span class="crayon-s">'/'</span><span class="crayon-sy">,</span><span class="crayon-v">component</span><span class="crayon-o">:</span><span class="crayon-v">Hi</span><span class="crayon-sy">}</span><span class="crayon-sy">,</span></div><div class="crayon-line crayon-marked-line" id="crayon-59f7036a4d0c8121240080-21"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-sy">{</span><span class="crayon-v">path</span><span class="crayon-o">:</span><span class="crayon-s">'hi1'</span><span class="crayon-sy">,</span><span class="crayon-v">component</span><span class="crayon-o">:</span><span class="crayon-v">Hi1</span><span class="crayon-sy">}</span><span class="crayon-sy">,</span></div><div class="crayon-line crayon-marked-line crayon-striped-line" id="crayon-59f7036a4d0c8121240080-22"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-sy">{</span><span class="crayon-v">path</span><span class="crayon-o">:</span><span class="crayon-s">'hi2'</span><span class="crayon-sy">,</span><span class="crayon-v">component</span><span class="crayon-o">:</span><span class="crayon-v">Hi2</span><span class="crayon-sy">}</span><span class="crayon-sy">,</span></div><div class="crayon-line crayon-marked-line crayon-bottom" id="crayon-59f7036a4d0c8121240080-23"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-sy">]</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f7036a4d0c8121240080-24"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-sy">}</span></div><div class="crayon-line" id="crayon-59f7036a4d0c8121240080-25"><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-sy">]</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f7036a4d0c8121240080-26"><span class="crayon-sy">}</span><span class="crayon-sy">)</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>
<!-- [Format Time: 0.0044 seconds] -->
<p>需要注意的是，在配置路由文件前，需要先用import引入Hi1和Hi2。</p>
<h3>总结：</h3>
<p>这节课学的内容在路由配置里经常用到，比如我们作一个购物模块，购物模块里有很多相同的元素，我们就会利用这种子路由的形式，先定一个父页面，然后再修改子页面。希望这节课对你有帮助，其实子路由的步骤还是有些繁琐的，所以希望你们多练习几遍，能够完全掌握。</p>
<hr />
<h2><span id="3vue-router"><a name="3"></a><span style="color: #ff6600;">第3节：vue-router如何参数传递</span></span></h2>
<div class="smartideo">
<div class="player">
                    <iframe src="//v.qq.com/iframe/player.html?vid=s0394i2w84u&#038;auto=0" width="100%" height="100%" frameborder="0" allowfullscreen="true"></iframe>
                </div>
</div>
<p><span style="color: #999999;">新的项目开始了，工作量很大，所以更新会比较慢，希望小伙伴们多多包涵。</span></p>
<p>开发中，参数的传递是个最基本的业务需求。通过URL地址来传递参数是一个形式，这节课我们就看看vue-router为我们提供了那些传递参数的功能。我们先想象一个基本需求，就是在我们点击导航菜单时，跳转页面上能显示出当前页面的路径，来告诉用户你想在所看的页面位置（类似于面包屑导航）。</p>
<h3>一、用name传递参数</h3>
<p>前两节课一直出现name的选项，但是我们都没有讲，这节课我们讲name的一种作用，传递参数。接着上节课的程序继续编写。</p>
<p>两步完成用name传值并显示在模板里：</p>
<ol>
<li>在路由文件src/router/index.js里配置name属性。<br />
<!-- Crayon Syntax Highlighter v_2.7.2_beta -->

		<div id="crayon-59f7036a4d0cf588003265" class="crayon-syntax crayon-theme-github crayon-font-droid-sans-mono crayon-os-mac print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
		
			<div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;">
 routes: [
    {
      path: '/',
      name: 'Hello',
      component: Hello
    }
 ]</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-59f7036a4d0cf588003265-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f7036a4d0cf588003265-2">2</div><div class="crayon-num" data-line="crayon-59f7036a4d0cf588003265-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f7036a4d0cf588003265-4">4</div><div class="crayon-num" data-line="crayon-59f7036a4d0cf588003265-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f7036a4d0cf588003265-6">6</div><div class="crayon-num" data-line="crayon-59f7036a4d0cf588003265-7">7</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-59f7036a4d0cf588003265-1"><span class="crayon-h"> </span><span class="crayon-v">routes</span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-sy">[</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f7036a4d0cf588003265-2"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-59f7036a4d0cf588003265-3"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-v">path</span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-s">'/'</span><span class="crayon-sy">,</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f7036a4d0cf588003265-4"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-v">name</span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-s">'Hello'</span><span class="crayon-sy">,</span></div><div class="crayon-line" id="crayon-59f7036a4d0cf588003265-5"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-v">component</span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-i">Hello</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f7036a4d0cf588003265-6"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-sy">}</span></div><div class="crayon-line" id="crayon-59f7036a4d0cf588003265-7"><span class="crayon-h"> </span><span class="crayon-sy">]</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>
<!-- [Format Time: 0.0010 seconds] -->

</li>
<li>模板里(src/App.vue)用$router.name的形势接收，比如直接在模板中显示：<br />
<!-- Crayon Syntax Highlighter v_2.7.2_beta -->

		<div id="crayon-59f7036a4d0d4788203185" class="crayon-syntax crayon-theme-github crayon-font-droid-sans-mono crayon-os-mac print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
		
			<div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;">
&lt;p&gt;{{ $route.name}}&lt;/p&gt;</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-59f7036a4d0d4788203185-1">1</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-59f7036a4d0d4788203185-1"><span class="crayon-r ">&lt;p&gt;</span><span class="crayon-i ">{{ $route.name}}</span><span class="crayon-r ">&lt;/p&gt;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>
<!-- [Format Time: 0.0002 seconds] -->
<br />
&nbsp;</li>
</ol>
<h3>二、通过&lt;router-link&gt; 标签中的to传参</h3>
<p>也许你也会觉的上边的传参很不正规，也不方便，其实我们多数传参是不用name进行传参的，我们用&lt;router-link&gt;标签中的to属性进行传参，需要您注意的是这里的to要进行一个绑定，写成<span style="color: #ff6600;">:to</span>。先来看一下这种传参方法的基本语法：</p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->

		<div id="crayon-59f7036a4d0d9248350275" class="crayon-syntax crayon-theme-github crayon-font-droid-sans-mono crayon-os-mac print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
		
			<div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;">
&lt;router-link :to="{name:xxx,params:{key:value}}"&gt;valueString&lt;/router-link&gt;</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-59f7036a4d0d9248350275-1">1</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-59f7036a4d0d9248350275-1"><span class="crayon-r ">&lt;router-link </span><span class="crayon-o">:</span><span class="crayon-e ">to</span><span class="crayon-o">=</span><span class="crayon-s ">"{name:xxx,params:{key:value}}"</span><span class="crayon-r ">&gt;</span><span class="crayon-i ">valueString</span><span class="crayon-r ">&lt;/router-link&gt;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>
<!-- [Format Time: 0.0004 seconds] -->
<p>这里的to前边是带冒号的，然后后边跟的是一个对象形势的字符串.</p>
<ul>
<li>name：就是我们在路由配置文件中起的name值。</li>
<li>params：就是我们要传的参数，它也是对象形势，在对象里可以传递多个值。</li>
</ul>
<p>了解基本的语法后，我们改造一下我们的src/App.vue里的&lt;router-link&gt;标签,我们把hi1页面的&lt;router-link&gt;进行修改。</p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->

		<div id="crayon-59f7036a4d0df733985089" class="crayon-syntax crayon-theme-github crayon-font-droid-sans-mono crayon-os-mac print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
		
			<div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;">
 &lt;router-link :to="{name:'hi1',params:{username:'jspang'}}"&gt;Hi页面1&lt;/router-link&gt;</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-59f7036a4d0df733985089-1">1</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-59f7036a4d0df733985089-1"><span class="crayon-h"> </span><span class="crayon-r ">&lt;router-link </span><span class="crayon-o">:</span><span class="crayon-e ">to</span><span class="crayon-o">=</span><span class="crayon-s ">"{name:'hi1',params:{username:'jspang'}}"</span><span class="crayon-r ">&gt;</span><span class="crayon-i ">Hi页面1</span><span class="crayon-r ">&lt;/router-link&gt;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>
<!-- [Format Time: 0.0006 seconds] -->
<p>把src/reouter/index.js文件里给hi1配置的路由起个name,就叫hi1.</p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->

		<div id="crayon-59f7036a4d0e3119731959" class="crayon-syntax crayon-theme-github crayon-font-droid-sans-mono crayon-os-mac print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
		
			<div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;">
 {path:'/hi1',name:'hi1',component:Hi1},</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-59f7036a4d0e3119731959-1">1</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-59f7036a4d0e3119731959-1"><span class="crayon-h"> </span><span class="crayon-sy">{</span><span class="crayon-v">path</span><span class="crayon-o">:</span><span class="crayon-s">'/hi1'</span><span class="crayon-sy">,</span><span class="crayon-v">name</span><span class="crayon-o">:</span><span class="crayon-s">'hi1'</span><span class="crayon-sy">,</span><span class="crayon-v">component</span><span class="crayon-o">:</span><span class="crayon-v">Hi1</span><span class="crayon-sy">}</span><span class="crayon-sy">,</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>
<!-- [Format Time: 0.0007 seconds] -->
<p>最后在模板里(src/components/Hi1.vue)用$route.params.username进行接收.</p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->

		<div id="crayon-59f7036a4d0e8295549290" class="crayon-syntax crayon-theme-github crayon-font-droid-sans-mono crayon-os-mac print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
		
			<div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;">
{{$route.params.username}}</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-59f7036a4d0e8295549290-1">1</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-59f7036a4d0e8295549290-1"><span class="crayon-sy">{</span><span class="crayon-sy">{</span><span class="crayon-sy">$</span><span class="crayon-v">route</span><span class="crayon-sy">.</span><span class="crayon-v">params</span><span class="crayon-sy">.</span><span class="crayon-v">username</span><span class="crayon-sy">}</span><span class="crayon-sy">}</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>
<!-- [Format Time: 0.0005 seconds] -->
<p></p>
<h4>总结：</h4>
<p>今天我们学习了两种传参的方法，一般会使用第二种方法。我们通过学习也知道了name的用途，一种作用是传参，一种作用是在传参时起到名称作用。传参的操作在实际开发中是基本的需求，我们一定要掌握好啊。</p>
<hr />
<h2><span id="4"><a name="4"></a><span style="color: #ff6600;">第4节：单页面多路由区域操作</span></span></h2>
<div class="smartideo">
<div class="player">
                    <iframe src="//v.qq.com/iframe/player.html?vid=f0396is7qrw&#038;auto=0" width="100%" height="100%" frameborder="0" allowfullscreen="true"></iframe>
                </div>
</div>
<p><strong><span style="color: #ff6600;">致歉：</span></strong>对不起大家，一周没有更新课程，因为公司开始了一个新项目，人手比较少，所以一直处于高压下工作，回家后什么都不想干，只想躺在床上闭目养神听会音乐。今天休息，我才有时间上博客逛一下，开始继续更新。</p>
<p>这节课我们讲“<strong>单页面多路由区域操作</strong>”，实际需求是这样的，在一个页面里我们有2个以上&lt;router-view&gt;区域，我们通过配置路由的js文件，来操作这些区域的内容。例如我们在src/App.vue里加上两个&lt;router-view&gt;标签。我们用vue-cli建立了新的项目，并打开了src目录下的App.vue文件，在&lt;router-view&gt;下面新写了两行&lt;router-view&gt;标签,并加入了些CSS样式。</p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->

		<div id="crayon-59f7036a4d0ee431447522" class="crayon-syntax crayon-theme-github crayon-font-droid-sans-mono crayon-os-mac print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
		
			<div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;">
 &lt;router-view &gt;&lt;/router-view&gt;
 &lt;router-view name="left" style="float:left;width:50%;background-color:#ccc;height:300px;"&gt;&lt;/router-view&gt;
 &lt;router-view name="right" style="float:right;width:50%;background-color:#c0c;height:300px;"&gt;&lt;/router-view&gt;</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-59f7036a4d0ee431447522-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f7036a4d0ee431447522-2">2</div><div class="crayon-num" data-line="crayon-59f7036a4d0ee431447522-3">3</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-59f7036a4d0ee431447522-1"><span class="crayon-h"> </span><span class="crayon-r ">&lt;router-view &gt;</span><span class="crayon-r ">&lt;/router-view&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f7036a4d0ee431447522-2"><span class="crayon-i "> </span><span class="crayon-r ">&lt;router-view </span><span class="crayon-e ">name</span><span class="crayon-o">=</span><span class="crayon-s ">"left"</span><span class="crayon-h"> </span><span class="crayon-e ">style</span><span class="crayon-o">=</span><span class="crayon-s ">"float:left;width:50%;background-color:#ccc;height:300px;"</span><span class="crayon-r ">&gt;</span><span class="crayon-r ">&lt;/router-view&gt;</span></div><div class="crayon-line" id="crayon-59f7036a4d0ee431447522-3"><span class="crayon-i "> </span><span class="crayon-r ">&lt;router-view </span><span class="crayon-e ">name</span><span class="crayon-o">=</span><span class="crayon-s ">"right"</span><span class="crayon-h"> </span><span class="crayon-e ">style</span><span class="crayon-o">=</span><span class="crayon-s ">"float:right;width:50%;background-color:#c0c;height:300px;"</span><span class="crayon-r ">&gt;</span><span class="crayon-r ">&lt;/router-view&gt;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>
<!-- [Format Time: 0.0011 seconds] -->
<p>现在的页面中有了三个&lt;router-view&gt;标签，也就是说我们需要在路由里配置这三个区域，配置主要是在components字段里进行。</p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->

		<div id="crayon-59f7036a4d0f3434327252" class="crayon-syntax crayon-theme-github crayon-font-droid-sans-mono crayon-os-mac print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
		
			<div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;">
import Vue from 'vue'
import Router from 'vue-router'
import Hello from '@/components/Hello'
import Hi1 from '@/components/Hi1'
import Hi2 from '@/components/Hi2'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      components: {
        default:Hello,
        left:Hi1,
        right:Hi2
      }
    },{
      path: '/Hi',
      components: {
        default:Hello,
        left:Hi2,
        right:Hi1
      }
    }

  ]
})</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-59f7036a4d0f3434327252-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f7036a4d0f3434327252-2">2</div><div class="crayon-num" data-line="crayon-59f7036a4d0f3434327252-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f7036a4d0f3434327252-4">4</div><div class="crayon-num" data-line="crayon-59f7036a4d0f3434327252-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f7036a4d0f3434327252-6">6</div><div class="crayon-num" data-line="crayon-59f7036a4d0f3434327252-7">7</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f7036a4d0f3434327252-8">8</div><div class="crayon-num" data-line="crayon-59f7036a4d0f3434327252-9">9</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f7036a4d0f3434327252-10">10</div><div class="crayon-num" data-line="crayon-59f7036a4d0f3434327252-11">11</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f7036a4d0f3434327252-12">12</div><div class="crayon-num" data-line="crayon-59f7036a4d0f3434327252-13">13</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f7036a4d0f3434327252-14">14</div><div class="crayon-num" data-line="crayon-59f7036a4d0f3434327252-15">15</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f7036a4d0f3434327252-16">16</div><div class="crayon-num" data-line="crayon-59f7036a4d0f3434327252-17">17</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f7036a4d0f3434327252-18">18</div><div class="crayon-num" data-line="crayon-59f7036a4d0f3434327252-19">19</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f7036a4d0f3434327252-20">20</div><div class="crayon-num" data-line="crayon-59f7036a4d0f3434327252-21">21</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f7036a4d0f3434327252-22">22</div><div class="crayon-num" data-line="crayon-59f7036a4d0f3434327252-23">23</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f7036a4d0f3434327252-24">24</div><div class="crayon-num" data-line="crayon-59f7036a4d0f3434327252-25">25</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f7036a4d0f3434327252-26">26</div><div class="crayon-num" data-line="crayon-59f7036a4d0f3434327252-27">27</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f7036a4d0f3434327252-28">28</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-59f7036a4d0f3434327252-1"><span class="crayon-e">import </span><span class="crayon-e">Vue </span><span class="crayon-i">from</span><span class="crayon-h"> </span><span class="crayon-s">'vue'</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f7036a4d0f3434327252-2"><span class="crayon-e">import </span><span class="crayon-e">Router </span><span class="crayon-i">from</span><span class="crayon-h"> </span><span class="crayon-s">'vue-router'</span></div><div class="crayon-line" id="crayon-59f7036a4d0f3434327252-3"><span class="crayon-e">import </span><span class="crayon-e">Hello </span><span class="crayon-i">from</span><span class="crayon-h"> </span><span class="crayon-s">'@/components/Hello'</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f7036a4d0f3434327252-4"><span class="crayon-e">import </span><span class="crayon-e">Hi1 </span><span class="crayon-i">from</span><span class="crayon-h"> </span><span class="crayon-s">'@/components/Hi1'</span></div><div class="crayon-line" id="crayon-59f7036a4d0f3434327252-5"><span class="crayon-e">import </span><span class="crayon-e">Hi2 </span><span class="crayon-i">from</span><span class="crayon-h"> </span><span class="crayon-s">'@/components/Hi2'</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f7036a4d0f3434327252-6">&nbsp;</div><div class="crayon-line" id="crayon-59f7036a4d0f3434327252-7"><span class="crayon-v">Vue</span><span class="crayon-sy">.</span><span class="crayon-st">use</span><span class="crayon-sy">(</span><span class="crayon-v">Router</span><span class="crayon-sy">)</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f7036a4d0f3434327252-8">&nbsp;</div><div class="crayon-line" id="crayon-59f7036a4d0f3434327252-9"><span class="crayon-e">export</span><span class="crayon-h"> </span><span class="crayon-st">default</span><span class="crayon-h"> </span><span class="crayon-r">new</span><span class="crayon-h"> </span><span class="crayon-e">Router</span><span class="crayon-sy">(</span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f7036a4d0f3434327252-10"><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-v">routes</span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-sy">[</span></div><div class="crayon-line" id="crayon-59f7036a4d0f3434327252-11"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f7036a4d0f3434327252-12"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-v">path</span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-s">'/'</span><span class="crayon-sy">,</span></div><div class="crayon-line" id="crayon-59f7036a4d0f3434327252-13"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-v">components</span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f7036a4d0f3434327252-14"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-st">default</span><span class="crayon-o">:</span><span class="crayon-v">Hello</span><span class="crayon-sy">,</span></div><div class="crayon-line" id="crayon-59f7036a4d0f3434327252-15"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-v">left</span><span class="crayon-o">:</span><span class="crayon-v">Hi1</span><span class="crayon-sy">,</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f7036a4d0f3434327252-16"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-v">right</span><span class="crayon-o">:</span><span class="crayon-i">Hi2</span></div><div class="crayon-line" id="crayon-59f7036a4d0f3434327252-17"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-sy">}</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f7036a4d0f3434327252-18"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-sy">}</span><span class="crayon-sy">,</span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-59f7036a4d0f3434327252-19"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-v">path</span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-s">'/Hi'</span><span class="crayon-sy">,</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f7036a4d0f3434327252-20"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-v">components</span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-59f7036a4d0f3434327252-21"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-st">default</span><span class="crayon-o">:</span><span class="crayon-v">Hello</span><span class="crayon-sy">,</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f7036a4d0f3434327252-22"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-v">left</span><span class="crayon-o">:</span><span class="crayon-v">Hi2</span><span class="crayon-sy">,</span></div><div class="crayon-line" id="crayon-59f7036a4d0f3434327252-23"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-v">right</span><span class="crayon-o">:</span><span class="crayon-i">Hi1</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f7036a4d0f3434327252-24"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-sy">}</span></div><div class="crayon-line" id="crayon-59f7036a4d0f3434327252-25"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-sy">}</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f7036a4d0f3434327252-26">&nbsp;</div><div class="crayon-line" id="crayon-59f7036a4d0f3434327252-27"><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-sy">]</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f7036a4d0f3434327252-28"><span class="crayon-sy">}</span><span class="crayon-sy">)</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>
<!-- [Format Time: 0.0038 seconds] -->
<p>上边的代码我们编写了两个路径，一个是默认的‘/’，另一个是&#8217;/Hi&#8217;.在两个路径下的components里面，我们对三个区域都定义了显示内容。</p>
<p>定义好后，我们需要在component文件夹下，新建Hi1.vue和Hi2.vue页面就可以了。</p>
<p>Hi1.vue</p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->

		<div id="crayon-59f7036a4d0f8417191224" class="crayon-syntax crayon-theme-github crayon-font-droid-sans-mono crayon-os-mac print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
		
			<div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;">
&lt;template&gt;
    &lt;div&gt;
        &lt;h2&gt;{{ msg }}&lt;/h2&gt; 
    &lt;/div&gt;
&lt;/template&gt;

&lt;script&gt;
export default {
  name: 'hi1',
  data () {
    return {
      msg: 'I am Hi1 page.'
    }
  }
}
&lt;/script&gt;</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-59f7036a4d0f8417191224-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f7036a4d0f8417191224-2">2</div><div class="crayon-num" data-line="crayon-59f7036a4d0f8417191224-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f7036a4d0f8417191224-4">4</div><div class="crayon-num" data-line="crayon-59f7036a4d0f8417191224-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f7036a4d0f8417191224-6">6</div><div class="crayon-num" data-line="crayon-59f7036a4d0f8417191224-7">7</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f7036a4d0f8417191224-8">8</div><div class="crayon-num" data-line="crayon-59f7036a4d0f8417191224-9">9</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f7036a4d0f8417191224-10">10</div><div class="crayon-num" data-line="crayon-59f7036a4d0f8417191224-11">11</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f7036a4d0f8417191224-12">12</div><div class="crayon-num" data-line="crayon-59f7036a4d0f8417191224-13">13</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f7036a4d0f8417191224-14">14</div><div class="crayon-num" data-line="crayon-59f7036a4d0f8417191224-15">15</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f7036a4d0f8417191224-16">16</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-59f7036a4d0f8417191224-1"><span class="crayon-r ">&lt;template&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f7036a4d0f8417191224-2"><span class="crayon-i ">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-r ">&lt;div&gt;</span></div><div class="crayon-line" id="crayon-59f7036a4d0f8417191224-3"><span class="crayon-i ">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-r ">&lt;h2&gt;</span><span class="crayon-i ">{{ msg }}</span><span class="crayon-r ">&lt;/h2&gt;</span><span class="crayon-i "> </span></div><div class="crayon-line crayon-striped-line" id="crayon-59f7036a4d0f8417191224-4"><span class="crayon-i ">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-r ">&lt;/div&gt;</span></div><div class="crayon-line" id="crayon-59f7036a4d0f8417191224-5"><span class="crayon-r ">&lt;/template&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f7036a4d0f8417191224-6">&nbsp;</div><div class="crayon-line" id="crayon-59f7036a4d0f8417191224-7"><span class="crayon-ta">&lt;script&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f7036a4d0f8417191224-8"><span class="crayon-e">export</span><span class="crayon-h"> </span><span class="crayon-st">default</span><span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-59f7036a4d0f8417191224-9"><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-v">name</span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-s">'hi1'</span><span class="crayon-sy">,</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f7036a4d0f8417191224-10"><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-e">data</span><span class="crayon-h"> </span><span class="crayon-sy">(</span><span class="crayon-sy">)</span><span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-59f7036a4d0f8417191224-11"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-st">return</span><span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f7036a4d0f8417191224-12"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-v">msg</span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-s">'I am Hi1 page.'</span></div><div class="crayon-line" id="crayon-59f7036a4d0f8417191224-13"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-sy">}</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f7036a4d0f8417191224-14"><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-sy">}</span></div><div class="crayon-line" id="crayon-59f7036a4d0f8417191224-15"><span class="crayon-sy">}</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f7036a4d0f8417191224-16"><span class="crayon-ta">&lt;/script&gt;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>
<!-- [Format Time: 0.0016 seconds] -->
<p>Hi2.vue</p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->

		<div id="crayon-59f7036a4d0fd539050597" class="crayon-syntax crayon-theme-github crayon-font-droid-sans-mono crayon-os-mac print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
		
			<div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;">
&lt;template&gt;
    &lt;div&gt;
        &lt;h2&gt;{{ msg }}&lt;/h2&gt;
    &lt;/div&gt;
&lt;/template&gt;

&lt;script&gt;
export default {
  name: 'hi2',
  data () {
    return {
      msg: 'I am Hi2 page.'
    }
  }
}
&lt;/script&gt;</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-59f7036a4d0fd539050597-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f7036a4d0fd539050597-2">2</div><div class="crayon-num" data-line="crayon-59f7036a4d0fd539050597-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f7036a4d0fd539050597-4">4</div><div class="crayon-num" data-line="crayon-59f7036a4d0fd539050597-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f7036a4d0fd539050597-6">6</div><div class="crayon-num" data-line="crayon-59f7036a4d0fd539050597-7">7</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f7036a4d0fd539050597-8">8</div><div class="crayon-num" data-line="crayon-59f7036a4d0fd539050597-9">9</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f7036a4d0fd539050597-10">10</div><div class="crayon-num" data-line="crayon-59f7036a4d0fd539050597-11">11</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f7036a4d0fd539050597-12">12</div><div class="crayon-num" data-line="crayon-59f7036a4d0fd539050597-13">13</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f7036a4d0fd539050597-14">14</div><div class="crayon-num" data-line="crayon-59f7036a4d0fd539050597-15">15</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f7036a4d0fd539050597-16">16</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-59f7036a4d0fd539050597-1"><span class="crayon-r ">&lt;template&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f7036a4d0fd539050597-2"><span class="crayon-i ">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-r ">&lt;div&gt;</span></div><div class="crayon-line" id="crayon-59f7036a4d0fd539050597-3"><span class="crayon-i ">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-r ">&lt;h2&gt;</span><span class="crayon-i ">{{ msg }}</span><span class="crayon-r ">&lt;/h2&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f7036a4d0fd539050597-4"><span class="crayon-i ">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-r ">&lt;/div&gt;</span></div><div class="crayon-line" id="crayon-59f7036a4d0fd539050597-5"><span class="crayon-r ">&lt;/template&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f7036a4d0fd539050597-6">&nbsp;</div><div class="crayon-line" id="crayon-59f7036a4d0fd539050597-7"><span class="crayon-ta">&lt;script&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f7036a4d0fd539050597-8"><span class="crayon-e">export</span><span class="crayon-h"> </span><span class="crayon-st">default</span><span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-59f7036a4d0fd539050597-9"><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-v">name</span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-s">'hi2'</span><span class="crayon-sy">,</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f7036a4d0fd539050597-10"><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-e">data</span><span class="crayon-h"> </span><span class="crayon-sy">(</span><span class="crayon-sy">)</span><span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-59f7036a4d0fd539050597-11"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-st">return</span><span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f7036a4d0fd539050597-12"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-v">msg</span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-s">'I am Hi2 page.'</span></div><div class="crayon-line" id="crayon-59f7036a4d0fd539050597-13"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-sy">}</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f7036a4d0fd539050597-14"><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-sy">}</span></div><div class="crayon-line" id="crayon-59f7036a4d0fd539050597-15"><span class="crayon-sy">}</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f7036a4d0fd539050597-16"><span class="crayon-ta">&lt;/script&gt;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>
<!-- [Format Time: 0.0015 seconds] -->
<p>最后在App.vue中配置我们的&lt;router-link&gt;就可以了</p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->

		<div id="crayon-59f7036a4d102273968502" class="crayon-syntax crayon-theme-github crayon-font-droid-sans-mono crayon-os-mac print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
		
			<div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;">
&lt;router-link to="/"&gt;首页&lt;/router-link&gt; | 
&lt;router-link to="/hi"&gt;Hi页面&lt;/router-link&gt; |</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-59f7036a4d102273968502-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f7036a4d102273968502-2">2</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-59f7036a4d102273968502-1"><span class="crayon-r ">&lt;router-link </span><span class="crayon-e ">to</span><span class="crayon-o">=</span><span class="crayon-s ">"/"</span><span class="crayon-r ">&gt;</span><span class="crayon-i ">首页</span><span class="crayon-r ">&lt;/router-link&gt;</span><span class="crayon-i "> | </span></div><div class="crayon-line crayon-striped-line" id="crayon-59f7036a4d102273968502-2"><span class="crayon-r ">&lt;router-link </span><span class="crayon-e ">to</span><span class="crayon-o">=</span><span class="crayon-s ">"/hi"</span><span class="crayon-r ">&gt;</span><span class="crayon-i ">Hi页面</span><span class="crayon-r ">&lt;/router-link&gt;</span><span class="crayon-h"> </span><span class="crayon-o">|</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>
<!-- [Format Time: 0.0007 seconds] -->
<p></p>
<hr />
<p><a name="5"></a></p>
<h2><span id="5vue-router-url"><span style="color: #ff6600;">第5节：vue-router 利用url传递参数</span></span></h2>
<div class="smartideo">
<div class="player">
                    <iframe src="//v.qq.com/iframe/player.html?vid=b0398drhaba&#038;auto=0" width="100%" height="100%" frameborder="0" allowfullscreen="true"></iframe>
                </div>
</div>
<p>我们在第3节虽然已经学会传递参数，但是我们这些老程序员的情怀还是利用url来传值，因为我们以前在前后端没有分开开发的时候，经常这样做。在实际开发也是有很多用URL传值的需求，比如我们在新闻列表中有很多新闻标题整齐的排列，我们需要点击每个新闻标题打开不同的新闻内容，这时在跳转路由时跟上新闻编号就十分实用。</p>
<h3>:冒号的形式传递参数</h3>
<p>我们可以在理由配置文件里以<span style="color: #ff6600;">:冒号</span>的形式传递参数，这就是对参数的绑定。</p>
<ol>
<li>在配置文件里以冒号的形式设置参数。我们在/src/router/index.js文件里配置路由。<br />
<!-- Crayon Syntax Highlighter v_2.7.2_beta -->

		<div id="crayon-59f7036a4d108818524724" class="crayon-syntax crayon-theme-github crayon-font-droid-sans-mono crayon-os-mac print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
		
			<div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;">
{
    path:'/params/:newsId/:newsTitle',
     component:Params
}</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-59f7036a4d108818524724-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f7036a4d108818524724-2">2</div><div class="crayon-num" data-line="crayon-59f7036a4d108818524724-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f7036a4d108818524724-4">4</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-59f7036a4d108818524724-1"><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f7036a4d108818524724-2"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-v">path</span><span class="crayon-o">:</span><span class="crayon-s">'/params/:newsId/:newsTitle'</span><span class="crayon-sy">,</span></div><div class="crayon-line" id="crayon-59f7036a4d108818524724-3"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp; </span><span class="crayon-v">component</span><span class="crayon-o">:</span><span class="crayon-i">Params</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f7036a4d108818524724-4"><span class="crayon-sy">}</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>
<!-- [Format Time: 0.0006 seconds] -->
<br />
我们需要传递参数是新闻ID（newsId）和新闻标题（newsTitle）.所以我们在路由配置文件里制定了这两个值。</li>
<li>在src/components目录下建立我们params.vue组件，也可以说是页面。我们在页面里输出了url传递的的新闻ID和新闻标题。<br />
<!-- Crayon Syntax Highlighter v_2.7.2_beta -->

		<div id="crayon-59f7036a4d10d086200537" class="crayon-syntax crayon-theme-github crayon-font-droid-sans-mono crayon-os-mac print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
		
			<div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;">
&lt;template&gt;
    &lt;div&gt;
        &lt;h2&gt;{{ msg }}&lt;/h2&gt;
        &lt;p&gt;新闻ID：{{ $route.params.newsId}}&lt;/p&gt;
        &lt;p&gt;新闻标题：{{ $route.params.newsTitle}}&lt;/p&gt;
    &lt;/div&gt;
&lt;/template&gt;

&lt;script&gt;
export default {
  name: 'params',
  data () {
    return {
      msg: 'params page'
    }
  }
}
&lt;/script&gt;</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-59f7036a4d10d086200537-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f7036a4d10d086200537-2">2</div><div class="crayon-num" data-line="crayon-59f7036a4d10d086200537-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f7036a4d10d086200537-4">4</div><div class="crayon-num" data-line="crayon-59f7036a4d10d086200537-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f7036a4d10d086200537-6">6</div><div class="crayon-num" data-line="crayon-59f7036a4d10d086200537-7">7</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f7036a4d10d086200537-8">8</div><div class="crayon-num" data-line="crayon-59f7036a4d10d086200537-9">9</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f7036a4d10d086200537-10">10</div><div class="crayon-num" data-line="crayon-59f7036a4d10d086200537-11">11</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f7036a4d10d086200537-12">12</div><div class="crayon-num" data-line="crayon-59f7036a4d10d086200537-13">13</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f7036a4d10d086200537-14">14</div><div class="crayon-num" data-line="crayon-59f7036a4d10d086200537-15">15</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f7036a4d10d086200537-16">16</div><div class="crayon-num" data-line="crayon-59f7036a4d10d086200537-17">17</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f7036a4d10d086200537-18">18</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-59f7036a4d10d086200537-1"><span class="crayon-r ">&lt;template&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f7036a4d10d086200537-2"><span class="crayon-i ">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-r ">&lt;div&gt;</span></div><div class="crayon-line" id="crayon-59f7036a4d10d086200537-3"><span class="crayon-i ">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-r ">&lt;h2&gt;</span><span class="crayon-i ">{{ msg }}</span><span class="crayon-r ">&lt;/h2&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f7036a4d10d086200537-4"><span class="crayon-i ">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-r ">&lt;p&gt;</span><span class="crayon-i ">新闻ID：{{ $route.params.newsId}}</span><span class="crayon-r ">&lt;/p&gt;</span></div><div class="crayon-line" id="crayon-59f7036a4d10d086200537-5"><span class="crayon-i ">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-r ">&lt;p&gt;</span><span class="crayon-i ">新闻标题：{{ $route.params.newsTitle}}</span><span class="crayon-r ">&lt;/p&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f7036a4d10d086200537-6"><span class="crayon-i ">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-r ">&lt;/div&gt;</span></div><div class="crayon-line" id="crayon-59f7036a4d10d086200537-7"><span class="crayon-r ">&lt;/template&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f7036a4d10d086200537-8">&nbsp;</div><div class="crayon-line" id="crayon-59f7036a4d10d086200537-9"><span class="crayon-ta">&lt;script&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f7036a4d10d086200537-10"><span class="crayon-e">export</span><span class="crayon-h"> </span><span class="crayon-st">default</span><span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-59f7036a4d10d086200537-11"><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-v">name</span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-s">'params'</span><span class="crayon-sy">,</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f7036a4d10d086200537-12"><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-e">data</span><span class="crayon-h"> </span><span class="crayon-sy">(</span><span class="crayon-sy">)</span><span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-59f7036a4d10d086200537-13"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-st">return</span><span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f7036a4d10d086200537-14"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-v">msg</span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-s">'params page'</span></div><div class="crayon-line" id="crayon-59f7036a4d10d086200537-15"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-sy">}</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f7036a4d10d086200537-16"><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-sy">}</span></div><div class="crayon-line" id="crayon-59f7036a4d10d086200537-17"><span class="crayon-sy">}</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f7036a4d10d086200537-18"><span class="crayon-ta">&lt;/script&gt;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>
<!-- [Format Time: 0.0018 seconds] -->

</li>
<li>在App.vue文件里加入我们的&lt;router-view&gt;标签。这时候我们可以直接利用url传值了。<br />
<!-- Crayon Syntax Highlighter v_2.7.2_beta -->

		<div id="crayon-59f7036a4d112832637670" class="crayon-syntax crayon-theme-github crayon-font-droid-sans-mono crayon-os-mac print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
		
			<div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;">
&lt;router-link to="/params/198/jspang website is very good"&gt;params&lt;/router-link&gt; |</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-59f7036a4d112832637670-1">1</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-59f7036a4d112832637670-1"><span class="crayon-r ">&lt;router-link </span><span class="crayon-e ">to</span><span class="crayon-o">=</span><span class="crayon-s ">"/params/198/jspang website is very good"</span><span class="crayon-r ">&gt;</span><span class="crayon-i ">params</span><span class="crayon-r ">&lt;/router-link&gt;</span><span class="crayon-h"> </span><span class="crayon-o">|</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>
<!-- [Format Time: 0.0005 seconds] -->

</li>
</ol>
<p>我们已经实现了以url方式进行传值，这在实际开发中经常使用，必须完全了解。我希望你看完视频后或者学完文章后能多练习两边，并在实际项目中充分使用。</p>
<h3>正则表达式在URL传值中的应用</h3>
<p>上边的例子，我们传递了新闻编号，现在需求升级了，我们希望我们传递的新闻ID只能是数字的形式，这时候我们就需要在传递时有个基本的类型判断，vue是支持正则的。</p>
<p>加入正则需要在路由配置文件里（/src/router/index.js）以圆括号的形式加入。</p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->

		<div id="crayon-59f7036a4d118651602963" class="crayon-syntax crayon-theme-github crayon-font-droid-sans-mono crayon-os-mac print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
		
			<div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;">
path:'/params/:newsId(\\d+)/:newsTitle',</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-59f7036a4d118651602963-1">1</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-59f7036a4d118651602963-1"><span class="crayon-v">path</span><span class="crayon-o">:</span><span class="crayon-s">'/params/:newsId(\\d+)/:newsTitle'</span><span class="crayon-sy">,</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>
<!-- [Format Time: 0.0003 seconds] -->
<p>加入了正则，我们再传递数字之外的其他参数，params.vue组件就没有办法接收到。</p>
<hr />
<p><a name="6"></a></p>
<h2><span id="6vue-router-redirect"><span style="color: #ff6600;">第6节：vue-router 的重定向-redirect</span></span></h2>
<div class="smartideo">
<div class="player">
                    <iframe src="//v.qq.com/iframe/player.html?vid=i0398ui2haz&#038;auto=0" width="100%" height="100%" frameborder="0" allowfullscreen="true"></iframe>
                </div>
</div>
<p>开发中有时候我们虽然设置的路径不一致，但是我们希望跳转到同一个页面，或者说是打开同一个组件。这时候我们就用到了路由的重新定向redirect参数。</p>
<h3>redirect基本重定向</h3>
<p>我们只要在路由配置文件中（/src/router/index.js）把原来的component换成redirect参数就可以了。我们来看一个简单的配置。</p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->

		<div id="crayon-59f7036a4d11d418057499" class="crayon-syntax crayon-theme-github crayon-font-droid-sans-mono crayon-os-mac print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
		
			<div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;">
export default new Router({
  routes: [
    {
      path: '/',
      component: Hello
    },{
      path:'/params/:newsId(\\d+)/:newsTitle',
      component:Params
    },{
      path:'/goback',
      redirect:'/'
    }

  ]
})</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-59f7036a4d11d418057499-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f7036a4d11d418057499-2">2</div><div class="crayon-num" data-line="crayon-59f7036a4d11d418057499-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f7036a4d11d418057499-4">4</div><div class="crayon-num" data-line="crayon-59f7036a4d11d418057499-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f7036a4d11d418057499-6">6</div><div class="crayon-num" data-line="crayon-59f7036a4d11d418057499-7">7</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f7036a4d11d418057499-8">8</div><div class="crayon-num" data-line="crayon-59f7036a4d11d418057499-9">9</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f7036a4d11d418057499-10">10</div><div class="crayon-num" data-line="crayon-59f7036a4d11d418057499-11">11</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f7036a4d11d418057499-12">12</div><div class="crayon-num" data-line="crayon-59f7036a4d11d418057499-13">13</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f7036a4d11d418057499-14">14</div><div class="crayon-num" data-line="crayon-59f7036a4d11d418057499-15">15</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-59f7036a4d11d418057499-1"><span class="crayon-e">export</span><span class="crayon-h"> </span><span class="crayon-st">default</span><span class="crayon-h"> </span><span class="crayon-r">new</span><span class="crayon-h"> </span><span class="crayon-e">Router</span><span class="crayon-sy">(</span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f7036a4d11d418057499-2"><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-v">routes</span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-sy">[</span></div><div class="crayon-line" id="crayon-59f7036a4d11d418057499-3"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f7036a4d11d418057499-4"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-v">path</span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-s">'/'</span><span class="crayon-sy">,</span></div><div class="crayon-line" id="crayon-59f7036a4d11d418057499-5"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-v">component</span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-i">Hello</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f7036a4d11d418057499-6"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-sy">}</span><span class="crayon-sy">,</span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-59f7036a4d11d418057499-7"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-v">path</span><span class="crayon-o">:</span><span class="crayon-s">'/params/:newsId(\\d+)/:newsTitle'</span><span class="crayon-sy">,</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f7036a4d11d418057499-8"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-v">component</span><span class="crayon-o">:</span><span class="crayon-i">Params</span></div><div class="crayon-line" id="crayon-59f7036a4d11d418057499-9"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-sy">}</span><span class="crayon-sy">,</span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f7036a4d11d418057499-10"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-v">path</span><span class="crayon-o">:</span><span class="crayon-s">'/goback'</span><span class="crayon-sy">,</span></div><div class="crayon-line" id="crayon-59f7036a4d11d418057499-11"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-v">redirect</span><span class="crayon-o">:</span><span class="crayon-s">'/'</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f7036a4d11d418057499-12"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-sy">}</span></div><div class="crayon-line" id="crayon-59f7036a4d11d418057499-13">&nbsp;</div><div class="crayon-line crayon-striped-line" id="crayon-59f7036a4d11d418057499-14"><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-sy">]</span></div><div class="crayon-line" id="crayon-59f7036a4d11d418057499-15"><span class="crayon-sy">}</span><span class="crayon-sy">)</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>
<!-- [Format Time: 0.0021 seconds] -->
<p>这里我们设置了goback路由，但是它并没有配置任何component（组件），而是直接redirect到path:&#8217;/&#8217;下了，这就是一个简单的重新定向。</p>
<h3>重定向时传递参数</h3>
<p>我们已经学会了通过url来传递参数，那我们重定向时如果也需要传递参数怎么办？其实vue也已经为我们设置好了，我们只需要在ridirect后边的参数里复制重定向路径的path参数就可以了。可能你看的有点晕，我们来看一段代码：</p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->

		<div id="crayon-59f7036a4d123562539258" class="crayon-syntax crayon-theme-github crayon-font-droid-sans-mono crayon-os-mac print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
		
			<div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;">
{
  path:'/params/:newsId(\\d+)/:newsTitle',
  component:Params
},{
  path:'/goParams/:newsId(\\d+)/:newsTitle',
  redirect:'/params/:newsId(\\d+)/:newsTitle'
}</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-59f7036a4d123562539258-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f7036a4d123562539258-2">2</div><div class="crayon-num" data-line="crayon-59f7036a4d123562539258-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f7036a4d123562539258-4">4</div><div class="crayon-num" data-line="crayon-59f7036a4d123562539258-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f7036a4d123562539258-6">6</div><div class="crayon-num" data-line="crayon-59f7036a4d123562539258-7">7</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-59f7036a4d123562539258-1"><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f7036a4d123562539258-2"><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-v">path</span><span class="crayon-o">:</span><span class="crayon-s">'/params/:newsId(\\d+)/:newsTitle'</span><span class="crayon-sy">,</span></div><div class="crayon-line" id="crayon-59f7036a4d123562539258-3"><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-v">component</span><span class="crayon-o">:</span><span class="crayon-i">Params</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f7036a4d123562539258-4"><span class="crayon-sy">}</span><span class="crayon-sy">,</span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-59f7036a4d123562539258-5"><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-v">path</span><span class="crayon-o">:</span><span class="crayon-s">'/goParams/:newsId(\\d+)/:newsTitle'</span><span class="crayon-sy">,</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f7036a4d123562539258-6"><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-v">redirect</span><span class="crayon-o">:</span><span class="crayon-s">'/params/:newsId(\\d+)/:newsTitle'</span></div><div class="crayon-line" id="crayon-59f7036a4d123562539258-7"><span class="crayon-sy">}</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>
<!-- [Format Time: 0.0010 seconds] -->
<p>已经有了一个params路由配置，我们在设置一个goParams的路由重定向，并传递了参数。这时候我们的路由参数就可以传递给params.vue组件了。参数接收方法和正常的路由接收方法一样。</p>
<hr />
<p><a name="7"></a></p>
<h2><span id="7alias"><span style="color: #ff6600;">第7节：alias别名的使用</span></span></h2>
<div class="smartideo">
<div class="player">
                    <iframe src="//v.qq.com/iframe/player.html?vid=h0398i900sg&#038;auto=0" width="100%" height="100%" frameborder="0" allowfullscreen="true"></iframe>
                </div>
</div>
<p>上节学习了路由的重定向，我相信大家已经可以熟练使用redirect进行重定向了。使用alias别名的形式，我们也可以实现类似重定向的效果。</p>
<p>1.首先我们在路由配置文件里（/src/router/index.js），给上节课的Home路径起一个别名，jspang。</p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->

		<div id="crayon-59f7036a4d128617769679" class="crayon-syntax crayon-theme-github crayon-font-droid-sans-mono crayon-os-mac print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
		
			<div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;">
{
    path: '/hi1',
    component: Hi1,
    alias:'/jspang'
 }</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-59f7036a4d128617769679-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f7036a4d128617769679-2">2</div><div class="crayon-num" data-line="crayon-59f7036a4d128617769679-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f7036a4d128617769679-4">4</div><div class="crayon-num" data-line="crayon-59f7036a4d128617769679-5">5</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-59f7036a4d128617769679-1"><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f7036a4d128617769679-2"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-v">path</span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-s">'/hi1'</span><span class="crayon-sy">,</span></div><div class="crayon-line" id="crayon-59f7036a4d128617769679-3"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-v">component</span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-v">Hi1</span><span class="crayon-sy">,</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f7036a4d128617769679-4"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-v">alias</span><span class="crayon-o">:</span><span class="crayon-s">'/jspang'</span></div><div class="crayon-line" id="crayon-59f7036a4d128617769679-5"><span class="crayon-h"> </span><span class="crayon-sy">}</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>
<!-- [Format Time: 0.0008 seconds] -->
<p>2.配置我们的&lt;router-link&gt;，起过别名之后，可以直接使用&lt;router-link&gt;标签里的to属性，进行重新定向。</p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->

		<div id="crayon-59f7036a4d12d274020281" class="crayon-syntax crayon-theme-github crayon-font-droid-sans-mono crayon-os-mac print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
		
			<div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;">
&lt;router-link to="/jspang"&gt;jspang&lt;/router-link&gt;</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-59f7036a4d12d274020281-1">1</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-59f7036a4d12d274020281-1"><span class="crayon-r ">&lt;router-link </span><span class="crayon-e ">to</span><span class="crayon-o">=</span><span class="crayon-s ">"/jspang"</span><span class="crayon-r ">&gt;</span><span class="crayon-i ">jspang</span><span class="crayon-r ">&lt;/router-link&gt;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>
<!-- [Format Time: 0.0005 seconds] -->
<p></p>
<h3>redirect和alias的区别</h3>
<ul>
<li>redirect：仔细观察URL，redirect是直接改变了url的值，把url变成了真实的path路径。</li>
<li>alias：URL路径没有别改变，这种情况更友好，让用户知道自己访问的路径，只是改变了&lt;router-view&gt;中的内容。</li>
</ul>
<p><strong>填个小坑：</strong></p>
<p>别名请不要用在path为&#8217;/&#8217;中，如下代码的别名是不起作用的。</p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->

		<div id="crayon-59f7036a4d132658275625" class="crayon-syntax crayon-theme-github crayon-font-droid-sans-mono crayon-os-mac print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
		
			<div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;">
{
  path: '/',
  component: Hello,
  alias:'/home'
}</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-59f7036a4d132658275625-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f7036a4d132658275625-2">2</div><div class="crayon-num" data-line="crayon-59f7036a4d132658275625-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f7036a4d132658275625-4">4</div><div class="crayon-num" data-line="crayon-59f7036a4d132658275625-5">5</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-59f7036a4d132658275625-1"><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f7036a4d132658275625-2"><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-v">path</span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-s">'/'</span><span class="crayon-sy">,</span></div><div class="crayon-line" id="crayon-59f7036a4d132658275625-3"><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-v">component</span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-v">Hello</span><span class="crayon-sy">,</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f7036a4d132658275625-4"><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-v">alias</span><span class="crayon-o">:</span><span class="crayon-s">'/home'</span></div><div class="crayon-line" id="crayon-59f7036a4d132658275625-5"><span class="crayon-sy">}</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>
<!-- [Format Time: 0.0008 seconds] -->
<p>在实际项目中我们遇到了这样的坑，开始以为是自己的代码写的有问题，找了两个小时作用。后来发现不是代码问题，只是vue不支持这样使用。我们犯过错误，踩过了坑，希望大家就不要踩了。</p>
<hr />
<p><a name="8"></a></p>
<h2><span id="8"><span style="color: #ff6600;">第8节：路由的过渡动画</span></span></h2>
<div class="smartideo">
<div class="player">
                    <iframe src="//v.qq.com/iframe/player.html?vid=k0398hmylcf&#038;auto=0" width="100%" height="100%" frameborder="0" allowfullscreen="true"></iframe>
                </div>
</div>
<p>在开发中有一种需求叫高端、大气、上档次。所以作为一个大前端有责任让你的程序开起来更酷炫。可以在页面切换时我们加入一些动画效果，提升我们程序的动效设计。这节课我们就学习一下路由的过渡动画效果制作。</p>
<h3>&lt;transition&gt;标签</h3>
<p>想让路由有过渡动画，需要在&lt;router-view&gt;标签的外部添加&lt;transition&gt;标签，标签还需要一个name属性。</p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->

		<div id="crayon-59f7036a4d137977289817" class="crayon-syntax crayon-theme-github crayon-font-droid-sans-mono crayon-os-mac print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
		
			<div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;">
&lt;transition name="fade"&gt;
  &lt;router-view &gt;&lt;/router-view&gt;
&lt;/transition&gt;</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-59f7036a4d137977289817-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f7036a4d137977289817-2">2</div><div class="crayon-num" data-line="crayon-59f7036a4d137977289817-3">3</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-59f7036a4d137977289817-1"><span class="crayon-r ">&lt;transition </span><span class="crayon-e ">name</span><span class="crayon-o">=</span><span class="crayon-s ">"fade"</span><span class="crayon-r ">&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f7036a4d137977289817-2"><span class="crayon-i ">&nbsp;&nbsp;</span><span class="crayon-r ">&lt;router-view &gt;</span><span class="crayon-r ">&lt;/router-view&gt;</span></div><div class="crayon-line" id="crayon-59f7036a4d137977289817-3"><span class="crayon-r ">&lt;/transition&gt;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>
<!-- [Format Time: 0.0005 seconds] -->
<p>我们在/src/App.vue文件里添加了&lt;transition&gt;标签，并给标签起了一个名字叫fade。</p>
<h3>css过渡类名：</h3>
<p>组件过渡过程中，会有四个CSS类名进行切换，这四个类名与transition的name属性有关，比如name=&#8221;fade&#8221;,会有如下四个CSS类名：</p>
<ol>
<li>fade-enter:进入过渡的开始状态，元素被插入时生效，只应用一帧后立刻删除。</li>
<li>fade-enter-active:进入过渡的结束状态，元素被插入时就生效，在过渡过程完成后移除。</li>
<li>fade-leave:离开过渡的开始状态，元素被删除时触发，只应用一帧后立刻删除。</li>
<li>fade-leave-active:离开过渡的结束状态，元素被删除时生效，离开过渡完成后被删除。</li>
</ol>
<p>从上面四个类名可以看出，fade-enter-active和fade-leave-active在整个进入或离开过程中都有效，所以CSS的transition属性在这两个类下进行设置。</p>
<p>那我们就在App.vue页面里加入四种CSS样式效果，并利用CSS3的transition属性控制动画的具体效果。代码如下：</p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->

		<div id="crayon-59f7036a4d13e387709123" class="crayon-syntax crayon-theme-github crayon-font-droid-sans-mono crayon-os-mac print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
		
			<div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;">
.fade-enter {
  opacity:0;
}
.fade-leave{
  opacity:1;
}
.fade-enter-active{
  transition:opacity .5s;
}
.fade-leave-active{
  opacity:0;
  transition:opacity .5s;
}</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-59f7036a4d13e387709123-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f7036a4d13e387709123-2">2</div><div class="crayon-num" data-line="crayon-59f7036a4d13e387709123-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f7036a4d13e387709123-4">4</div><div class="crayon-num" data-line="crayon-59f7036a4d13e387709123-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f7036a4d13e387709123-6">6</div><div class="crayon-num" data-line="crayon-59f7036a4d13e387709123-7">7</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f7036a4d13e387709123-8">8</div><div class="crayon-num" data-line="crayon-59f7036a4d13e387709123-9">9</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f7036a4d13e387709123-10">10</div><div class="crayon-num" data-line="crayon-59f7036a4d13e387709123-11">11</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f7036a4d13e387709123-12">12</div><div class="crayon-num" data-line="crayon-59f7036a4d13e387709123-13">13</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-59f7036a4d13e387709123-1"><span class="crayon-k ">.fade-enter </span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f7036a4d13e387709123-2"><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-e ">opacity</span><span class="crayon-sy">:</span><span class="crayon-i ">0</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-59f7036a4d13e387709123-3"><span class="crayon-sy">}</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f7036a4d13e387709123-4"><span class="crayon-k ">.fade-leave</span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-59f7036a4d13e387709123-5"><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-e ">opacity</span><span class="crayon-sy">:</span><span class="crayon-i ">1</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f7036a4d13e387709123-6"><span class="crayon-sy">}</span></div><div class="crayon-line" id="crayon-59f7036a4d13e387709123-7"><span class="crayon-k ">.fade-enter-active</span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f7036a4d13e387709123-8"><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-e ">transition</span><span class="crayon-sy">:</span><span class="crayon-i ">opacity</span><span class="crayon-h"> </span><span class="crayon-i ">.5s</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-59f7036a4d13e387709123-9"><span class="crayon-sy">}</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f7036a4d13e387709123-10"><span class="crayon-k ">.fade-leave-active</span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-59f7036a4d13e387709123-11"><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-e ">opacity</span><span class="crayon-sy">:</span><span class="crayon-i ">0</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f7036a4d13e387709123-12"><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-e ">transition</span><span class="crayon-sy">:</span><span class="crayon-i ">opacity</span><span class="crayon-h"> </span><span class="crayon-i ">.5s</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-59f7036a4d13e387709123-13"><span class="crayon-sy">}</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>
<!-- [Format Time: 0.0013 seconds] -->
<p>上边的代码设置了改变透明度的动画过渡效果，但是默认的mode模式in-out模式，这并不是我们想要的。下面我们学一下mode模式。</p>
<h3>过渡模式mode：</h3>
<ul>
<li>in-out:新元素先进入过渡，完成之后当前元素过渡离开。</li>
<li>out-in:当前元素先进行过渡离开，离开完成后新元素过渡进入。</li>
</ul>
<p>这节课只能算是一个简单的过渡入门，教会大家原理，如果想做出实用酷炫的过渡效果，你需要有较强的动画制作能力，我们下节课继续学习动画的知识。</p>
<hr />
<p><a name="9"></a></p>
<h2><span id="9mode404"><span style="color: #ff6600;">第9节：mode的设置和404页面的处理</span></span></h2>
<div class="smartideo">
<div class="player">
                    <iframe src="//v.qq.com/iframe/player.html?vid=z0398gju4mp&#038;auto=0" width="100%" height="100%" frameborder="0" allowfullscreen="true"></iframe>
                </div>
</div>
<p>在学习过渡效果的时候，我们学了mode的设置，但是在路由的属性中还有一个mode。这节课我们就学习一下另一个mode模式和404页面的设置。</p>
<h3>mode的两个值</h3>
<ol>
<li>histroy:当你使用 history 模式时，URL 就像正常的 url，例如 http://jsapng.com/lms/，也好看！</li>
<li>hash:默认’hash’值，但是hash看起来就像无意义的字符排列，不太好看也不符合我们一般的网址浏览习惯。</li>
</ol>
<p>具体的效果我在视频中会有所掩饰，不理解的小伙伴可以到视频中进行查看。</p>
<h3>404页面的设置：</h3>
<p>用户会经常输错页面，当用户输错页面时，我们希望给他一个友好的提示，为此美工都会设计一个漂亮的页面，这个页面就是我们常说的404页面。vue-router也为我们提供了这样的机制.</p>
<p>1.设置我们的路由配置文件（/src/router/index.js）：</p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->

		<div id="crayon-59f7036a4d145047135362" class="crayon-syntax crayon-theme-github crayon-font-droid-sans-mono crayon-os-mac print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
		
			<div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;">
{
   path:'*',
   component:Error
}</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-59f7036a4d145047135362-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f7036a4d145047135362-2">2</div><div class="crayon-num" data-line="crayon-59f7036a4d145047135362-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f7036a4d145047135362-4">4</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-59f7036a4d145047135362-1"><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f7036a4d145047135362-2"><span class="crayon-h">&nbsp;&nbsp; </span><span class="crayon-v">path</span><span class="crayon-o">:</span><span class="crayon-s">'*'</span><span class="crayon-sy">,</span></div><div class="crayon-line" id="crayon-59f7036a4d145047135362-3"><span class="crayon-h">&nbsp;&nbsp; </span><span class="crayon-v">component</span><span class="crayon-o">:</span><span class="crayon-i">Error</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f7036a4d145047135362-4"><span class="crayon-sy">}</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>
<!-- [Format Time: 0.0009 seconds] -->
<p>这里的path:&#8217;*&#8217;就是找不到页面时的配置，component是我们新建的一个Error.vue的文件。</p>
<p>2.新建404页面：</p>
<p>在/src/components/文件夹下新建一个Error.vue的文件。简单输入一些有关错误页面的内容。</p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->

		<div id="crayon-59f7036a4d14a231738221" class="crayon-syntax crayon-theme-github crayon-font-droid-sans-mono crayon-os-mac print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
		
			<div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;">
&lt;template&gt;
    &lt;div&gt;
        &lt;h2&gt;{{ msg }}&lt;/h2&gt;
    &lt;/div&gt;
&lt;/template&gt;
&lt;script&gt;
export default {
  data () {
    return {
      msg: 'Error:404'
    }
  }
}
&lt;/script&gt;</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-59f7036a4d14a231738221-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f7036a4d14a231738221-2">2</div><div class="crayon-num" data-line="crayon-59f7036a4d14a231738221-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f7036a4d14a231738221-4">4</div><div class="crayon-num" data-line="crayon-59f7036a4d14a231738221-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f7036a4d14a231738221-6">6</div><div class="crayon-num" data-line="crayon-59f7036a4d14a231738221-7">7</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f7036a4d14a231738221-8">8</div><div class="crayon-num" data-line="crayon-59f7036a4d14a231738221-9">9</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f7036a4d14a231738221-10">10</div><div class="crayon-num" data-line="crayon-59f7036a4d14a231738221-11">11</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f7036a4d14a231738221-12">12</div><div class="crayon-num" data-line="crayon-59f7036a4d14a231738221-13">13</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f7036a4d14a231738221-14">14</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-59f7036a4d14a231738221-1"><span class="crayon-r ">&lt;template&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f7036a4d14a231738221-2"><span class="crayon-i ">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-r ">&lt;div&gt;</span></div><div class="crayon-line" id="crayon-59f7036a4d14a231738221-3"><span class="crayon-i ">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-r ">&lt;h2&gt;</span><span class="crayon-i ">{{ msg }}</span><span class="crayon-r ">&lt;/h2&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f7036a4d14a231738221-4"><span class="crayon-i ">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-r ">&lt;/div&gt;</span></div><div class="crayon-line" id="crayon-59f7036a4d14a231738221-5"><span class="crayon-r ">&lt;/template&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f7036a4d14a231738221-6"><span class="crayon-ta">&lt;script&gt;</span></div><div class="crayon-line" id="crayon-59f7036a4d14a231738221-7"><span class="crayon-e">export</span><span class="crayon-h"> </span><span class="crayon-st">default</span><span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f7036a4d14a231738221-8"><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-e">data</span><span class="crayon-h"> </span><span class="crayon-sy">(</span><span class="crayon-sy">)</span><span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-59f7036a4d14a231738221-9"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-st">return</span><span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f7036a4d14a231738221-10"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-v">msg</span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-s">'Error:404'</span></div><div class="crayon-line" id="crayon-59f7036a4d14a231738221-11"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-sy">}</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f7036a4d14a231738221-12"><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-sy">}</span></div><div class="crayon-line" id="crayon-59f7036a4d14a231738221-13"><span class="crayon-sy">}</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f7036a4d14a231738221-14"><span class="crayon-ta">&lt;/script&gt;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>
<!-- [Format Time: 0.0015 seconds] -->
<p>3.我们在用&lt;router-link&gt;瞎写一个标签的路径。</p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->

		<div id="crayon-59f7036a4d14e067952172" class="crayon-syntax crayon-theme-github crayon-font-droid-sans-mono crayon-os-mac print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
		
			<div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;">
 &lt;router-link to="/bbbbbb"&gt;我是瞎写的&lt;/router-link&gt; |</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-59f7036a4d14e067952172-1">1</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-59f7036a4d14e067952172-1"><span class="crayon-h"> </span><span class="crayon-r ">&lt;router-link </span><span class="crayon-e ">to</span><span class="crayon-o">=</span><span class="crayon-s ">"/bbbbbb"</span><span class="crayon-r ">&gt;</span><span class="crayon-i ">我是瞎写的</span><span class="crayon-r ">&lt;/router-link&gt;</span><span class="crayon-h"> </span><span class="crayon-o">|</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>
<!-- [Format Time: 0.0004 seconds] -->
<p>预览一下我们现在的结果，就已经实现404页面的效果。</p>
<hr />
<p><a name="10"></a></p>
<h2><span id="10"><span style="color: #ff6600;">第10节：路由中的钩子</span></span></h2>
<div class="smartideo">
<div class="player">
                    <iframe src="//v.qq.com/iframe/player.html?vid=x03981gzmma&#038;auto=0" width="100%" height="100%" frameborder="0" allowfullscreen="true"></iframe>
                </div>
</div>
<p>我们知道一个组件从进入到销毁有很多的钩子函数，同样在路由中也设置了钩子函数。路由的钩子选项可以写在路由配置文件中，也可以写在我们的组件模板中。我们这节课就介绍这两种钩子函数的写法。</p>
<h3>路由配置文件中的钩子函数</h3>
<p>我们可以直接在路由配置文件（/src/router/index.js）中写钩子函数。但是在路由文件中我们只能写一个beforeEnter,就是在进入此路由配置时。先来看一段具体的代码：</p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->

		<div id="crayon-59f7036a4d154761679914" class="crayon-syntax crayon-theme-github crayon-font-droid-sans-mono crayon-os-mac print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
		
			<div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;">
{
      path:'/params/:newsId(\\d+)/:newsTitle',
      component:Params,
      beforeEnter:(to,from,next)=&gt;{
        console.log('我进入了params模板');
        console.log(to);
        console.log(from);
        next();
},</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-59f7036a4d154761679914-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f7036a4d154761679914-2">2</div><div class="crayon-num" data-line="crayon-59f7036a4d154761679914-3">3</div><div class="crayon-num crayon-marked-num crayon-top crayon-striped-num" data-line="crayon-59f7036a4d154761679914-4">4</div><div class="crayon-num crayon-marked-num" data-line="crayon-59f7036a4d154761679914-5">5</div><div class="crayon-num crayon-marked-num crayon-striped-num" data-line="crayon-59f7036a4d154761679914-6">6</div><div class="crayon-num crayon-marked-num" data-line="crayon-59f7036a4d154761679914-7">7</div><div class="crayon-num crayon-marked-num crayon-bottom crayon-striped-num" data-line="crayon-59f7036a4d154761679914-8">8</div><div class="crayon-num" data-line="crayon-59f7036a4d154761679914-9">9</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-59f7036a4d154761679914-1"><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f7036a4d154761679914-2"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-v">path</span><span class="crayon-o">:</span><span class="crayon-s">'/params/:newsId(\\d+)/:newsTitle'</span><span class="crayon-sy">,</span></div><div class="crayon-line" id="crayon-59f7036a4d154761679914-3"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-v">component</span><span class="crayon-o">:</span><span class="crayon-v">Params</span><span class="crayon-sy">,</span></div><div class="crayon-line crayon-marked-line crayon-top crayon-striped-line" id="crayon-59f7036a4d154761679914-4"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-v">beforeEnter</span><span class="crayon-o">:</span><span class="crayon-sy">(</span><span class="crayon-st">to</span><span class="crayon-sy">,</span><span class="crayon-v">from</span><span class="crayon-sy">,</span><span class="crayon-v">next</span><span class="crayon-sy">)</span><span class="crayon-o">=</span><span class="crayon-o">&gt;</span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-marked-line" id="crayon-59f7036a4d154761679914-5"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-v">console</span><span class="crayon-sy">.</span><span class="crayon-e">log</span><span class="crayon-sy">(</span><span class="crayon-s">'我进入了params模板'</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-marked-line crayon-striped-line" id="crayon-59f7036a4d154761679914-6"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-v">console</span><span class="crayon-sy">.</span><span class="crayon-e">log</span><span class="crayon-sy">(</span><span class="crayon-st">to</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-marked-line" id="crayon-59f7036a4d154761679914-7"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-v">console</span><span class="crayon-sy">.</span><span class="crayon-e">log</span><span class="crayon-sy">(</span><span class="crayon-v">from</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-marked-line crayon-bottom crayon-striped-line" id="crayon-59f7036a4d154761679914-8"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-e">next</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-59f7036a4d154761679914-9"><span class="crayon-sy">}</span><span class="crayon-sy">,</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>
<!-- [Format Time: 0.0020 seconds] -->
<p>我们在params路由里配置了bdforeEnter得钩子函数，函数我们采用了ES6的箭头函数，需要传递三个参数。我们并在箭头函数中打印了to和from函数。具体打印内容可以在控制台查看object。</p>
<p>三个参数：</p>
<ol>
<li>to:路由将要跳转的路径信息，信息是包含在对像里边的。</li>
<li>from:路径跳转前的路径信息，也是一个对象的形式。</li>
<li>next:路由的控制参数，常用的有next(true)和next(false)。</li>
</ol>
<h3>写在模板中的钩子函数</h3>
<p>在配置文件中的钩子函数，只有一个钩子-beforeEnter，如果我们写在模板中就可以有两个钩子函数可以使用：</p>
<ul>
<li>beforeRouteEnter：在路由进入前的钩子函数。</li>
<li>beforeRouteLeave：在路由离开前的钩子函数。</li>
</ul>
<p></p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->

		<div id="crayon-59f7036a4d15a124385541" class="crayon-syntax crayon-theme-github crayon-font-droid-sans-mono crayon-os-mac print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
		
			<div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;">
export default {
  name: 'params',
  data () {
    return {
      msg: 'params page'
    }
  },
  beforeRouteEnter:(to,from,next)=&gt;{
    console.log("准备进入路由模板");
    next();
  },
  beforeRouteLeave: (to, from, next) =&gt; {
    console.log("准备离开路由模板");
    next();
  }
}
&lt;/script&gt;</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-59f7036a4d15a124385541-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f7036a4d15a124385541-2">2</div><div class="crayon-num" data-line="crayon-59f7036a4d15a124385541-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f7036a4d15a124385541-4">4</div><div class="crayon-num" data-line="crayon-59f7036a4d15a124385541-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f7036a4d15a124385541-6">6</div><div class="crayon-num" data-line="crayon-59f7036a4d15a124385541-7">7</div><div class="crayon-num crayon-marked-num crayon-top crayon-striped-num" data-line="crayon-59f7036a4d15a124385541-8">8</div><div class="crayon-num crayon-marked-num" data-line="crayon-59f7036a4d15a124385541-9">9</div><div class="crayon-num crayon-marked-num crayon-striped-num" data-line="crayon-59f7036a4d15a124385541-10">10</div><div class="crayon-num crayon-marked-num" data-line="crayon-59f7036a4d15a124385541-11">11</div><div class="crayon-num crayon-marked-num crayon-striped-num" data-line="crayon-59f7036a4d15a124385541-12">12</div><div class="crayon-num crayon-marked-num" data-line="crayon-59f7036a4d15a124385541-13">13</div><div class="crayon-num crayon-marked-num crayon-striped-num" data-line="crayon-59f7036a4d15a124385541-14">14</div><div class="crayon-num crayon-marked-num crayon-bottom" data-line="crayon-59f7036a4d15a124385541-15">15</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f7036a4d15a124385541-16">16</div><div class="crayon-num" data-line="crayon-59f7036a4d15a124385541-17">17</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-59f7036a4d15a124385541-1"><span class="crayon-e">export</span><span class="crayon-h"> </span><span class="crayon-st">default</span><span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f7036a4d15a124385541-2"><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-v">name</span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-s">'params'</span><span class="crayon-sy">,</span></div><div class="crayon-line" id="crayon-59f7036a4d15a124385541-3"><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-e">data</span><span class="crayon-h"> </span><span class="crayon-sy">(</span><span class="crayon-sy">)</span><span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f7036a4d15a124385541-4"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-st">return</span><span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-59f7036a4d15a124385541-5"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-v">msg</span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-s">'params page'</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f7036a4d15a124385541-6"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-sy">}</span></div><div class="crayon-line" id="crayon-59f7036a4d15a124385541-7"><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-sy">}</span><span class="crayon-sy">,</span></div><div class="crayon-line crayon-marked-line crayon-top crayon-striped-line" id="crayon-59f7036a4d15a124385541-8"><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-v">beforeRouteEnter</span><span class="crayon-o">:</span><span class="crayon-sy">(</span><span class="crayon-st">to</span><span class="crayon-sy">,</span><span class="crayon-v">from</span><span class="crayon-sy">,</span><span class="crayon-v">next</span><span class="crayon-sy">)</span><span class="crayon-o">=</span><span class="crayon-o">&gt;</span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-marked-line" id="crayon-59f7036a4d15a124385541-9"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-v">console</span><span class="crayon-sy">.</span><span class="crayon-e">log</span><span class="crayon-sy">(</span><span class="crayon-s">"准备进入路由模板"</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-marked-line crayon-striped-line" id="crayon-59f7036a4d15a124385541-10"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-e">next</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-marked-line" id="crayon-59f7036a4d15a124385541-11"><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-sy">}</span><span class="crayon-sy">,</span></div><div class="crayon-line crayon-marked-line crayon-striped-line" id="crayon-59f7036a4d15a124385541-12"><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-v">beforeRouteLeave</span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-sy">(</span><span class="crayon-st">to</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-v">from</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-v">next</span><span class="crayon-sy">)</span><span class="crayon-h"> </span><span class="crayon-o">=</span><span class="crayon-o">&gt;</span><span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-marked-line" id="crayon-59f7036a4d15a124385541-13"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-v">console</span><span class="crayon-sy">.</span><span class="crayon-e">log</span><span class="crayon-sy">(</span><span class="crayon-s">"准备离开路由模板"</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-marked-line crayon-striped-line" id="crayon-59f7036a4d15a124385541-14"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-e">next</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-marked-line crayon-bottom" id="crayon-59f7036a4d15a124385541-15"><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-sy">}</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f7036a4d15a124385541-16"><span class="crayon-sy">}</span></div><div class="crayon-line" id="crayon-59f7036a4d15a124385541-17"><span class="crayon-ta">&lt;/script&gt;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>
<!-- [Format Time: 0.0032 seconds] -->
<p>这是我们写在params.vue模板里的路由钩子函数。它可以监控到路由的进入和路由的离开，也可以轻易的读出to和from的值。</p>
<hr />
<p><a name="11"></a></p>
<h2><span id="11"><span style="color: #ff6600;">第11节：编程式导航</span></span></h2>
<div class="smartideo">
<div class="player">
                    <iframe src="//v.qq.com/iframe/player.html?vid=k0398r50u5z&#038;auto=0" width="100%" height="100%" frameborder="0" allowfullscreen="true"></iframe>
                </div>
</div>
<p>这是这篇文章的最后一节，前10节课的导航都是用&lt;router-link&gt;标签或者直接操作地址栏的形式完成的，那如果在<span style="color: #ff6600;">业务逻辑代码</span>中需要跳转页面我们如何操作？这就是我们要说的编程式导航，顾名思义，就是在业务逻辑代码中实现导航。</p>
<div>
<h3>this.$router.go(-1) 和 this.$router.go(1)</h3>
</div>
<div>这两个编程式导航的意思是后退和前进，功能跟我们浏览器上的后退和前进按钮一样，这在业务逻辑中经常用到。比如条件不满足时，我们需要后退。</div>
<div><span style="color: #ff6600;">router.go(-1)</span>代表着后退，我们可以让我们的导航进行后退，并且我们的地址栏也是有所变化的。</div>
<div>1.我们先在app.vue文件里加入一个按钮，按钮并绑定一个goback( )方法。</div>
<div>
<!-- Crayon Syntax Highlighter v_2.7.2_beta -->

		<div id="crayon-59f7036a4d160776880358" class="crayon-syntax crayon-theme-github crayon-font-droid-sans-mono crayon-os-mac print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
		
			<div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;">
&lt;button @click="goback"&gt;后退&lt;/button&gt;</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-59f7036a4d160776880358-1">1</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-59f7036a4d160776880358-1"><span class="crayon-r ">&lt;button </span><span class="crayon-sy">@</span><span class="crayon-e ">click</span><span class="crayon-o">=</span><span class="crayon-s ">"goback"</span><span class="crayon-r ">&gt;</span><span class="crayon-i ">后退</span><span class="crayon-r ">&lt;/button&gt;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>
<!-- [Format Time: 0.0004 seconds] -->
<br />
2.在我们的script模块中写入goback()方法，并使用this.$router.go(-1),进行后退操作。<br />
<!-- Crayon Syntax Highlighter v_2.7.2_beta -->

		<div id="crayon-59f7036a4d165952733300" class="crayon-syntax crayon-theme-github crayon-font-droid-sans-mono crayon-os-mac print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
		
			<div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;">
&lt;script&gt;
export default {
  name: 'app',
  methods:{
    goback(){
      this.$router.go(-1);
    }
  }
}
&lt;/script&gt;</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-59f7036a4d165952733300-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f7036a4d165952733300-2">2</div><div class="crayon-num" data-line="crayon-59f7036a4d165952733300-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f7036a4d165952733300-4">4</div><div class="crayon-num" data-line="crayon-59f7036a4d165952733300-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f7036a4d165952733300-6">6</div><div class="crayon-num" data-line="crayon-59f7036a4d165952733300-7">7</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f7036a4d165952733300-8">8</div><div class="crayon-num" data-line="crayon-59f7036a4d165952733300-9">9</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f7036a4d165952733300-10">10</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-59f7036a4d165952733300-1"><span class="crayon-ta">&lt;script&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f7036a4d165952733300-2"><span class="crayon-e">export</span><span class="crayon-h"> </span><span class="crayon-st">default</span><span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-59f7036a4d165952733300-3"><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-v">name</span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-s">'app'</span><span class="crayon-sy">,</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f7036a4d165952733300-4"><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-v">methods</span><span class="crayon-o">:</span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-59f7036a4d165952733300-5"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-e">goback</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f7036a4d165952733300-6"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-r">this</span><span class="crayon-sy">.</span><span class="crayon-sy">$</span><span class="crayon-v">router</span><span class="crayon-sy">.</span><span class="crayon-e">go</span><span class="crayon-sy">(</span><span class="crayon-o">-</span><span class="crayon-cn">1</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-59f7036a4d165952733300-7"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-sy">}</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f7036a4d165952733300-8"><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-sy">}</span></div><div class="crayon-line" id="crayon-59f7036a4d165952733300-9"><span class="crayon-sy">}</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f7036a4d165952733300-10"><span class="crayon-ta">&lt;/script&gt;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>
<!-- [Format Time: 0.0015 seconds] -->
<br />
打开浏览器进行预览，这时我们的后退按钮就可以向以前的网页一样后退了。</p>
<p>router.go(1):代表着前进，用法和后退一样，我在这里就不重复码字了（码字辛苦希望大家理解）。</p>
<h3>this.$router.push(&#8216;/xxx &#8216;)</h3>
<p>这个编程式导航都作用就是跳转，比如我们判断用户名和密码正确时，需要跳转到用户中心页面或者首页，都用到这个编程的方法来操作路由。</p>
<p>我们设置一个按钮，点击按钮后回到站点首页。</p>
<p>1.先编写一个按钮，在按钮上绑定goHome( )方法。</p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->

		<div id="crayon-59f7036a4d16e888744794" class="crayon-syntax crayon-theme-github crayon-font-droid-sans-mono crayon-os-mac print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
		
			<div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;">
&lt;button @click="goHome"&gt;回到首页&lt;/button&gt;</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-59f7036a4d16e888744794-1">1</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-59f7036a4d16e888744794-1"><span class="crayon-r ">&lt;button </span><span class="crayon-sy">@</span><span class="crayon-e ">click</span><span class="crayon-o">=</span><span class="crayon-s ">"goHome"</span><span class="crayon-r ">&gt;</span><span class="crayon-i ">回到首页</span><span class="crayon-r ">&lt;/button&gt;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>
<!-- [Format Time: 0.0004 seconds] -->
<p>2.在&lt;script&gt;模块里加入goHome方法，并用this.$router.push(&#8216;/&#8217;)导航到首页</p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->

		<div id="crayon-59f7036a4d178945826556" class="crayon-syntax crayon-theme-github crayon-font-droid-sans-mono crayon-os-mac print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
		
			<div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;">
export default {
  name: 'app',
  methods:{
    goback(){
      this.$router.go(-1);
    },
    goHome(){
      this.$router.push('/');
    }
  }
}</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-59f7036a4d178945826556-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f7036a4d178945826556-2">2</div><div class="crayon-num" data-line="crayon-59f7036a4d178945826556-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f7036a4d178945826556-4">4</div><div class="crayon-num" data-line="crayon-59f7036a4d178945826556-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f7036a4d178945826556-6">6</div><div class="crayon-num crayon-marked-num crayon-top" data-line="crayon-59f7036a4d178945826556-7">7</div><div class="crayon-num crayon-marked-num crayon-striped-num" data-line="crayon-59f7036a4d178945826556-8">8</div><div class="crayon-num crayon-marked-num crayon-bottom" data-line="crayon-59f7036a4d178945826556-9">9</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f7036a4d178945826556-10">10</div><div class="crayon-num" data-line="crayon-59f7036a4d178945826556-11">11</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-59f7036a4d178945826556-1"><span class="crayon-e">export</span><span class="crayon-h"> </span><span class="crayon-st">default</span><span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f7036a4d178945826556-2"><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-v">name</span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-s">'app'</span><span class="crayon-sy">,</span></div><div class="crayon-line" id="crayon-59f7036a4d178945826556-3"><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-v">methods</span><span class="crayon-o">:</span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f7036a4d178945826556-4"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-e">goback</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-59f7036a4d178945826556-5"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-r">this</span><span class="crayon-sy">.</span><span class="crayon-sy">$</span><span class="crayon-v">router</span><span class="crayon-sy">.</span><span class="crayon-e">go</span><span class="crayon-sy">(</span><span class="crayon-o">-</span><span class="crayon-cn">1</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f7036a4d178945826556-6"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-sy">}</span><span class="crayon-sy">,</span></div><div class="crayon-line crayon-marked-line crayon-top" id="crayon-59f7036a4d178945826556-7"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-e">goHome</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-marked-line crayon-striped-line" id="crayon-59f7036a4d178945826556-8"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-r">this</span><span class="crayon-sy">.</span><span class="crayon-sy">$</span><span class="crayon-v">router</span><span class="crayon-sy">.</span><span class="crayon-e">push</span><span class="crayon-sy">(</span><span class="crayon-s">'/'</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-marked-line crayon-bottom" id="crayon-59f7036a4d178945826556-9"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-sy">}</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f7036a4d178945826556-10"><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-sy">}</span></div><div class="crayon-line" id="crayon-59f7036a4d178945826556-11"><span class="crayon-sy">}</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>
<!-- [Format Time: 0.0019 seconds] -->
<p>
</p></div>
<p>&nbsp;</p>
<p>总结：我们利用11节课把vue-router的知识学习了一遍，因为个人能力有限，知识点难免有所遗漏，希望小伙伴们多多谅解，通过这套课程我对vue-router的知识有了更深的了解，对教是最好的学习也体会更深了。这套课程录制也是比较曲折的，新项目的开始，耽误了一周多的时间，刚进入正常阶段准备继续录制时，家里的键盘又坏掉了，也利用这个机会给家里也还上了机械键盘，可谓因祸得福。</p>
<p>&nbsp;</p>
        <div class="gave" >
            <a href="javascript:;" id="gave">打赏</a>
            <div class="code" id="wechatCode" style="display: none">
                <img src="style/images/20170518151055111.png" alt="微信扫一扫支付">
                <div><img src="style/images/ico-wechat.jpg" alt="微信logo" class="ico-wechat">微信扫一扫，打赏作者吧～</i></div>
            </div>
        </div>        </div> <!-- //.entry-content -->
               <br>
        <div class="entry-tags text-left">标签：<a href="http://jspang.com/tag/vue/" rel="tag">Vue</a></div>
    </div>

</article><!-- #post-## -->                              
				<div class="user-profile media">
    <div class="pull-left author-avater">
        <img alt='' src='style/images/774555ea0f0ea3a59b61748c53c99fba-110.jpg' srcset='http://1.gravatar.com/avatar/774555ea0f0ea3a59b61748c53c99fba?s=220&amp;d=mm&amp;r=g 2x' class='avatar avatar-110 photo' height='110' width='110' />    </div>
    <div class="media-body">
        <div class="profile-heading">
            <h3><a href="http://jspang.com/author/jspang001/" title="由技术胖发布" rel="author">技术胖</a></h3>
        </div>
        <div class="website-link">http://jspang.com</div>
        <div class="author-description">
                    </div>
    </div>
</div><!-- .user-profile -->                               
				
	<nav class="navigation post-navigation" role="navigation">
		<h2 class="screen-reader-text">文章导航</h2>
		<div class="nav-links"><div class="nav-previous"><a href="http://jspang.com/2017/04/10/vue-cli/" rel="prev"><i class="fa fa-angle-left"></i> Previous Post</a></div><div class="nav-next"><a href="http://jspang.com/2017/05/03/vuex/" rel="next">Next Post <i class="fa fa-angle-right"></i></a></div></div>
	</nav>
									<div class="comment-box">
						<div id="comments" class="comments-area comments">
            <h3 class="common-title comments-title">
            45 Comments        </h3>

        <ul class="comment-list">

            			<li class="comment even thread-even depth-1" id="li-comment-117">
				<div id="comment-117" class="comment-body media">

					<div class="comment-avartar pull-left">
						<img alt='' src='style/images/5a57e5d0d1d0a15fb6601baf1f44e615-75.jpg' srcset='http://2.gravatar.com/avatar/5a57e5d0d1d0a15fb6601baf1f44e615?s=150&amp;d=mm&amp;r=g 2x' class='avatar avatar-75 photo' height='75' width='75' />					</div>
					<div class="comment-context media-body">
						<div class="comment-head">
							<h3 class="comment-author">Peach</h3>							<span class="comment-date">2017年4月16日</span>
						</div>

						
						<div class="comment-content">
							<p>期待后续更新!!</p>
						</div>

												<span class="comment-reply">
							<a rel='nofollow' class='comment-reply-link' href='http://jspang.com/2017/04/13/vue-router/?replytocom=117#respond' onclick='return addComment.moveForm( "comment-117", "117", "respond", "1461" )' aria-label='回复给Peach'>Reply</a>						</span>

					</div>

				</div>
				</li><!-- #comment-## -->
			<li class="comment odd alt thread-odd thread-alt depth-1" id="li-comment-118">
				<div id="comment-118" class="comment-body media">

					<div class="comment-avartar pull-left">
						<img alt='' src='style/images/a426378f2a56b760d6ca81a70f8c4c96-75.jpg' srcset='http://1.gravatar.com/avatar/a426378f2a56b760d6ca81a70f8c4c96?s=150&amp;d=mm&amp;r=g 2x' class='avatar avatar-75 photo' height='75' width='75' />					</div>
					<div class="comment-context media-body">
						<div class="comment-head">
							<h3 class="comment-author">小钟·</h3>							<span class="comment-date">2017年4月24日</span>
						</div>

						
						<div class="comment-content">
							<p>期待期待！后面都没得看了········</p>
						</div>

												<span class="comment-reply">
							<a rel='nofollow' class='comment-reply-link' href='http://jspang.com/2017/04/13/vue-router/?replytocom=118#respond' onclick='return addComment.moveForm( "comment-118", "118", "respond", "1461" )' aria-label='回复给小钟·'>Reply</a>						</span>

					</div>

				</div>
				<ul class="children">
			<li class="comment byuser comment-author-jspang001 bypostauthor even depth-2" id="li-comment-119">
				<div id="comment-119" class="comment-body media">

					<div class="comment-avartar pull-left">
						<img alt='' src='style/images/774555ea0f0ea3a59b61748c53c99fba-75.jpg' srcset='http://1.gravatar.com/avatar/774555ea0f0ea3a59b61748c53c99fba?s=150&amp;d=mm&amp;r=g 2x' class='avatar avatar-75 photo' height='75' width='75' />					</div>
					<div class="comment-context media-body">
						<div class="comment-head">
							<h3 class="comment-author"><a href='http://jspang.com' rel='external nofollow' class='url'>技术胖</a></h3>							<span class="comment-date">2017年4月25日</span>
						</div>

						
						<div class="comment-content">
							<p>今天会更新一集。</p>
						</div>

												<span class="comment-reply">
							<a rel='nofollow' class='comment-reply-link' href='http://jspang.com/2017/04/13/vue-router/?replytocom=119#respond' onclick='return addComment.moveForm( "comment-119", "119", "respond", "1461" )' aria-label='回复给技术胖'>Reply</a>						</span>

					</div>

				</div>
				</li><!-- #comment-## -->
</ul><!-- .children -->
</li><!-- #comment-## -->
			<li class="comment odd alt thread-even depth-1" id="li-comment-120">
				<div id="comment-120" class="comment-body media">

					<div class="comment-avartar pull-left">
						<img alt='' src='style/images/14781b89992542abf69e9445ee9bf57b-75.jpg' srcset='http://1.gravatar.com/avatar/14781b89992542abf69e9445ee9bf57b?s=150&amp;d=mm&amp;r=g 2x' class='avatar avatar-75 photo' height='75' width='75' />					</div>
					<div class="comment-context media-body">
						<div class="comment-head">
							<h3 class="comment-author">小芮</h3>							<span class="comment-date">2017年4月25日</span>
						</div>

						
						<div class="comment-content">
							<p>已经刷完了，胖锅锅，快更呀</p>
						</div>

												<span class="comment-reply">
							<a rel='nofollow' class='comment-reply-link' href='http://jspang.com/2017/04/13/vue-router/?replytocom=120#respond' onclick='return addComment.moveForm( "comment-120", "120", "respond", "1461" )' aria-label='回复给小芮'>Reply</a>						</span>

					</div>

				</div>
				<ul class="children">
			<li class="comment byuser comment-author-jspang001 bypostauthor even depth-2" id="li-comment-121">
				<div id="comment-121" class="comment-body media">

					<div class="comment-avartar pull-left">
						<img alt='' src='style/images/774555ea0f0ea3a59b61748c53c99fba-75.jpg' srcset='http://1.gravatar.com/avatar/774555ea0f0ea3a59b61748c53c99fba?s=150&amp;d=mm&amp;r=g 2x' class='avatar avatar-75 photo' height='75' width='75' />					</div>
					<div class="comment-context media-body">
						<div class="comment-head">
							<h3 class="comment-author"><a href='http://jspang.com' rel='external nofollow' class='url'>技术胖</a></h3>							<span class="comment-date">2017年4月26日</span>
						</div>

						
						<div class="comment-content">
							<p>今天开始更新。</p>
						</div>

												<span class="comment-reply">
							<a rel='nofollow' class='comment-reply-link' href='http://jspang.com/2017/04/13/vue-router/?replytocom=121#respond' onclick='return addComment.moveForm( "comment-121", "121", "respond", "1461" )' aria-label='回复给技术胖'>Reply</a>						</span>

					</div>

				</div>
				</li><!-- #comment-## -->
</ul><!-- .children -->
</li><!-- #comment-## -->
			<li class="comment odd alt thread-odd thread-alt depth-1" id="li-comment-122">
				<div id="comment-122" class="comment-body media">

					<div class="comment-avartar pull-left">
						<img alt='' src='style/images/9f00d41d03a6666de2d06937049a5e71-75.jpg' srcset='http://0.gravatar.com/avatar/9f00d41d03a6666de2d06937049a5e71?s=150&amp;d=mm&amp;r=g 2x' class='avatar avatar-75 photo' height='75' width='75' />					</div>
					<div class="comment-context media-body">
						<div class="comment-head">
							<h3 class="comment-author"><a href='https://wsdever.github.io/' rel='external nofollow' class='url'>wsdever</a></h3>							<span class="comment-date">2017年4月26日</span>
						</div>

						
						<div class="comment-content">
							<p>把src/reouter/index.js文件里给hi1配置的路由起个name,就叫hi1.</p>
<p> {path:&#8217;hi1&#8242;,name:&#8217;hi1&#8242;,component:Hi1},</p>
<p>这里的path应该是&#8221;/hi1&#8243;,少了斜杠</p>
						</div>

												<span class="comment-reply">
							<a rel='nofollow' class='comment-reply-link' href='http://jspang.com/2017/04/13/vue-router/?replytocom=122#respond' onclick='return addComment.moveForm( "comment-122", "122", "respond", "1461" )' aria-label='回复给wsdever'>Reply</a>						</span>

					</div>

				</div>
				<ul class="children">
			<li class="comment byuser comment-author-jspang001 bypostauthor even depth-2" id="li-comment-123">
				<div id="comment-123" class="comment-body media">

					<div class="comment-avartar pull-left">
						<img alt='' src='style/images/774555ea0f0ea3a59b61748c53c99fba-75.jpg' srcset='http://1.gravatar.com/avatar/774555ea0f0ea3a59b61748c53c99fba?s=150&amp;d=mm&amp;r=g 2x' class='avatar avatar-75 photo' height='75' width='75' />					</div>
					<div class="comment-context media-body">
						<div class="comment-head">
							<h3 class="comment-author"><a href='http://jspang.com' rel='external nofollow' class='url'>技术胖</a></h3>							<span class="comment-date">2017年4月26日</span>
						</div>

						
						<div class="comment-content">
							<p>感谢你提出的错误，文章已经修改。</p>
						</div>

												<span class="comment-reply">
							<a rel='nofollow' class='comment-reply-link' href='http://jspang.com/2017/04/13/vue-router/?replytocom=123#respond' onclick='return addComment.moveForm( "comment-123", "123", "respond", "1461" )' aria-label='回复给技术胖'>Reply</a>						</span>

					</div>

				</div>
				</li><!-- #comment-## -->
</ul><!-- .children -->
</li><!-- #comment-## -->
			<li class="comment odd alt thread-even depth-1" id="li-comment-124">
				<div id="comment-124" class="comment-body media">

					<div class="comment-avartar pull-left">
						<img alt='' src='style/images/da20b9ef0d311b08785040df106489da-75.jpg' srcset='http://1.gravatar.com/avatar/da20b9ef0d311b08785040df106489da?s=150&amp;d=mm&amp;r=g 2x' class='avatar avatar-75 photo' height='75' width='75' />					</div>
					<div class="comment-context media-body">
						<div class="comment-head">
							<h3 class="comment-author">error</h3>							<span class="comment-date">2017年4月26日</span>
						</div>

						
						<div class="comment-content">
							<p>辛苦了 支持一下。</p>
						</div>

												<span class="comment-reply">
							<a rel='nofollow' class='comment-reply-link' href='http://jspang.com/2017/04/13/vue-router/?replytocom=124#respond' onclick='return addComment.moveForm( "comment-124", "124", "respond", "1461" )' aria-label='回复给error'>Reply</a>						</span>

					</div>

				</div>
				</li><!-- #comment-## -->
			<li class="comment even thread-odd thread-alt depth-1" id="li-comment-125">
				<div id="comment-125" class="comment-body media">

					<div class="comment-avartar pull-left">
						<img alt='' src='style/images/98520346222553d326dfa635ebe8d655-75.jpg' srcset='http://0.gravatar.com/avatar/98520346222553d326dfa635ebe8d655?s=150&amp;d=mm&amp;r=g 2x' class='avatar avatar-75 photo' height='75' width='75' />					</div>
					<div class="comment-context media-body">
						<div class="comment-head">
							<h3 class="comment-author">dayang</h3>							<span class="comment-date">2017年4月29日</span>
						</div>

						
						<div class="comment-content">
							<p>谢谢技术胖，学到了不少，期待Vuex的教程</p>
						</div>

												<span class="comment-reply">
							<a rel='nofollow' class='comment-reply-link' href='http://jspang.com/2017/04/13/vue-router/?replytocom=125#respond' onclick='return addComment.moveForm( "comment-125", "125", "respond", "1461" )' aria-label='回复给dayang'>Reply</a>						</span>

					</div>

				</div>
				</li><!-- #comment-## -->
			<li class="comment odd alt thread-even depth-1" id="li-comment-126">
				<div id="comment-126" class="comment-body media">

					<div class="comment-avartar pull-left">
						<img alt='' src='style/images/5a57e5d0d1d0a15fb6601baf1f44e615-75.jpg' srcset='http://2.gravatar.com/avatar/5a57e5d0d1d0a15fb6601baf1f44e615?s=150&amp;d=mm&amp;r=g 2x' class='avatar avatar-75 photo' height='75' width='75' />					</div>
					<div class="comment-context media-body">
						<div class="comment-head">
							<h3 class="comment-author">Peach</h3>							<span class="comment-date">2017年5月2日</span>
						</div>

						
						<div class="comment-content">
							<p>期待后续更新!!VueX</p>
						</div>

												<span class="comment-reply">
							<a rel='nofollow' class='comment-reply-link' href='http://jspang.com/2017/04/13/vue-router/?replytocom=126#respond' onclick='return addComment.moveForm( "comment-126", "126", "respond", "1461" )' aria-label='回复给Peach'>Reply</a>						</span>

					</div>

				</div>
				</li><!-- #comment-## -->
			<li class="comment even thread-odd thread-alt depth-1" id="li-comment-127">
				<div id="comment-127" class="comment-body media">

					<div class="comment-avartar pull-left">
						<img alt='' src='style/images/09bad3fec091cb95a1538efe5c1e1def-75.jpg' srcset='http://0.gravatar.com/avatar/09bad3fec091cb95a1538efe5c1e1def?s=150&amp;d=mm&amp;r=g 2x' class='avatar avatar-75 photo' height='75' width='75' />					</div>
					<div class="comment-context media-body">
						<div class="comment-head">
							<h3 class="comment-author">zhuifeng</h3>							<span class="comment-date">2017年5月8日</span>
						</div>

						
						<div class="comment-content">
							<p>技术胖讲的不错，浅显易懂</p>
						</div>

												<span class="comment-reply">
							<a rel='nofollow' class='comment-reply-link' href='http://jspang.com/2017/04/13/vue-router/?replytocom=127#respond' onclick='return addComment.moveForm( "comment-127", "127", "respond", "1461" )' aria-label='回复给zhuifeng'>Reply</a>						</span>

					</div>

				</div>
				</li><!-- #comment-## -->
			<li class="comment odd alt thread-even depth-1" id="li-comment-128">
				<div id="comment-128" class="comment-body media">

					<div class="comment-avartar pull-left">
						<img alt='' src='style/images/76d48f5216fea7231294f6f638e00e17-75.jpg' srcset='http://1.gravatar.com/avatar/76d48f5216fea7231294f6f638e00e17?s=150&amp;d=mm&amp;r=g 2x' class='avatar avatar-75 photo' height='75' width='75' />					</div>
					<div class="comment-context media-body">
						<div class="comment-head">
							<h3 class="comment-author">王耀辉</h3>							<span class="comment-date">2017年5月8日</span>
						</div>

						
						<div class="comment-content">
							<p>胖哥 辛苦辛苦！工作之余还要给我们录教学视频，一定会好好学习！</p>
						</div>

												<span class="comment-reply">
							<a rel='nofollow' class='comment-reply-link' href='http://jspang.com/2017/04/13/vue-router/?replytocom=128#respond' onclick='return addComment.moveForm( "comment-128", "128", "respond", "1461" )' aria-label='回复给王耀辉'>Reply</a>						</span>

					</div>

				</div>
				</li><!-- #comment-## -->
			<li class="comment even thread-odd thread-alt depth-1" id="li-comment-129">
				<div id="comment-129" class="comment-body media">

					<div class="comment-avartar pull-left">
						<img alt='' src='style/images/76d48f5216fea7231294f6f638e00e17-75.jpg' srcset='http://1.gravatar.com/avatar/76d48f5216fea7231294f6f638e00e17?s=150&amp;d=mm&amp;r=g 2x' class='avatar avatar-75 photo' height='75' width='75' />					</div>
					<div class="comment-context media-body">
						<div class="comment-head">
							<h3 class="comment-author">wangYH</h3>							<span class="comment-date">2017年5月10日</span>
						</div>

						
						<div class="comment-content">
							<p>看完了这个vue-router感觉受益很多！感谢胖哥！接着看vuex</p>
						</div>

												<span class="comment-reply">
							<a rel='nofollow' class='comment-reply-link' href='http://jspang.com/2017/04/13/vue-router/?replytocom=129#respond' onclick='return addComment.moveForm( "comment-129", "129", "respond", "1461" )' aria-label='回复给wangYH'>Reply</a>						</span>

					</div>

				</div>
				<ul class="children">
			<li class="comment byuser comment-author-jspang001 bypostauthor odd alt depth-2" id="li-comment-130">
				<div id="comment-130" class="comment-body media">

					<div class="comment-avartar pull-left">
						<img alt='' src='style/images/774555ea0f0ea3a59b61748c53c99fba-75.jpg' srcset='http://1.gravatar.com/avatar/774555ea0f0ea3a59b61748c53c99fba?s=150&amp;d=mm&amp;r=g 2x' class='avatar avatar-75 photo' height='75' width='75' />					</div>
					<div class="comment-context media-body">
						<div class="comment-head">
							<h3 class="comment-author"><a href='http://jspang.com' rel='external nofollow' class='url'>技术胖</a></h3>							<span class="comment-date">2017年5月11日</span>
						</div>

						
						<div class="comment-content">
							<p>恩，vuex也快录制完成了。现在学习正好。</p>
						</div>

												<span class="comment-reply">
							<a rel='nofollow' class='comment-reply-link' href='http://jspang.com/2017/04/13/vue-router/?replytocom=130#respond' onclick='return addComment.moveForm( "comment-130", "130", "respond", "1461" )' aria-label='回复给技术胖'>Reply</a>						</span>

					</div>

				</div>
				</li><!-- #comment-## -->
</ul><!-- .children -->
</li><!-- #comment-## -->
			<li class="comment even thread-even depth-1" id="li-comment-220">
				<div id="comment-220" class="comment-body media">

					<div class="comment-avartar pull-left">
						<img alt='' src='style/images/ae8282ed17444f14ca26c6af0748922a-75.jpg' srcset='http://1.gravatar.com/avatar/ae8282ed17444f14ca26c6af0748922a?s=150&amp;d=mm&amp;r=g 2x' class='avatar avatar-75 photo' height='75' width='75' />					</div>
					<div class="comment-context media-body">
						<div class="comment-head">
							<h3 class="comment-author">Dipaka1992</h3>							<span class="comment-date">2017年6月24日</span>
						</div>

						
						<div class="comment-content">
							<p>胖哥，很感谢您为我们出了这么好的教程。但是我想实现pc端首页跳转到登录页面我就不知道该怎么做了，首页和其他的页面都有导航，而登录页面没有导航，百度了好多，一直没有找到答案，所以今天特向您求教。</p>
						</div>

												<span class="comment-reply">
							<a rel='nofollow' class='comment-reply-link' href='http://jspang.com/2017/04/13/vue-router/?replytocom=220#respond' onclick='return addComment.moveForm( "comment-220", "220", "respond", "1461" )' aria-label='回复给Dipaka1992'>Reply</a>						</span>

					</div>

				</div>
				<ul class="children">
			<li class="comment byuser comment-author-jspang001 bypostauthor odd alt depth-2" id="li-comment-222">
				<div id="comment-222" class="comment-body media">

					<div class="comment-avartar pull-left">
						<img alt='' src='style/images/774555ea0f0ea3a59b61748c53c99fba-75.jpg' srcset='http://1.gravatar.com/avatar/774555ea0f0ea3a59b61748c53c99fba?s=150&amp;d=mm&amp;r=g 2x' class='avatar avatar-75 photo' height='75' width='75' />					</div>
					<div class="comment-context media-body">
						<div class="comment-head">
							<h3 class="comment-author"><a href='http://jspang.com' rel='external nofollow' class='url'>技术胖</a></h3>							<span class="comment-date">2017年6月25日</span>
						</div>

						
						<div class="comment-content">
							<p>请看编程式导航一节，肯定可以解决你的问题。其实就是this.$router.push()或者this.$router.replace().</p>
						</div>

												<span class="comment-reply">
							<a rel='nofollow' class='comment-reply-link' href='http://jspang.com/2017/04/13/vue-router/?replytocom=222#respond' onclick='return addComment.moveForm( "comment-222", "222", "respond", "1461" )' aria-label='回复给技术胖'>Reply</a>						</span>

					</div>

				</div>
				</li><!-- #comment-## -->
</ul><!-- .children -->
</li><!-- #comment-## -->
			<li class="comment even thread-odd thread-alt depth-1" id="li-comment-254">
				<div id="comment-254" class="comment-body media">

					<div class="comment-avartar pull-left">
						<img alt='' src='style/images/c737285d0739b774b04815e0c77204c2-75.jpg' srcset='http://0.gravatar.com/avatar/c737285d0739b774b04815e0c77204c2?s=150&amp;d=mm&amp;r=g 2x' class='avatar avatar-75 photo' height='75' width='75' />					</div>
					<div class="comment-context media-body">
						<div class="comment-head">
							<h3 class="comment-author">xiaoliu</h3>							<span class="comment-date">2017年7月4日</span>
						</div>

						
						<div class="comment-content">
							<p>胖哥，报这个错误 GET <a href="http://localhost:8080/__webpack_hmr" rel="nofollow">http://localhost:8080/__webpack_hmr</a> net::ERR_INCOMPLETE_CHUNKED_ENCODING 不知道是什么原因</p>
						</div>

												<span class="comment-reply">
							<a rel='nofollow' class='comment-reply-link' href='http://jspang.com/2017/04/13/vue-router/?replytocom=254#respond' onclick='return addComment.moveForm( "comment-254", "254", "respond", "1461" )' aria-label='回复给xiaoliu'>Reply</a>						</span>

					</div>

				</div>
				<ul class="children">
			<li class="comment byuser comment-author-jspang001 bypostauthor odd alt depth-2" id="li-comment-255">
				<div id="comment-255" class="comment-body media">

					<div class="comment-avartar pull-left">
						<img alt='' src='style/images/774555ea0f0ea3a59b61748c53c99fba-75.jpg' srcset='http://1.gravatar.com/avatar/774555ea0f0ea3a59b61748c53c99fba?s=150&amp;d=mm&amp;r=g 2x' class='avatar avatar-75 photo' height='75' width='75' />					</div>
					<div class="comment-context media-body">
						<div class="comment-head">
							<h3 class="comment-author"><a href='http://jspang.com' rel='external nofollow' class='url'>技术胖</a></h3>							<span class="comment-date">2017年7月5日</span>
						</div>

						
						<div class="comment-content">
							<p>本地服务器启动失败，没有启动起来。</p>
						</div>

												<span class="comment-reply">
							<a rel='nofollow' class='comment-reply-link' href='http://jspang.com/2017/04/13/vue-router/?replytocom=255#respond' onclick='return addComment.moveForm( "comment-255", "255", "respond", "1461" )' aria-label='回复给技术胖'>Reply</a>						</span>

					</div>

				</div>
				<ul class="children">
			<li class="comment even depth-3" id="li-comment-258">
				<div id="comment-258" class="comment-body media">

					<div class="comment-avartar pull-left">
						<img alt='' src='style/images/c737285d0739b774b04815e0c77204c2-75.jpg' srcset='http://0.gravatar.com/avatar/c737285d0739b774b04815e0c77204c2?s=150&amp;d=mm&amp;r=g 2x' class='avatar avatar-75 photo' height='75' width='75' />					</div>
					<div class="comment-context media-body">
						<div class="comment-head">
							<h3 class="comment-author">xiaoliu</h3>							<span class="comment-date">2017年7月5日</span>
						</div>

						
						<div class="comment-content">
							<p>但是没有影响正常使用，所以很奇怪</p>
						</div>

												<span class="comment-reply">
							<a rel='nofollow' class='comment-reply-link' href='http://jspang.com/2017/04/13/vue-router/?replytocom=258#respond' onclick='return addComment.moveForm( "comment-258", "258", "respond", "1461" )' aria-label='回复给xiaoliu'>Reply</a>						</span>

					</div>

				</div>
				</li><!-- #comment-## -->
</ul><!-- .children -->
</li><!-- #comment-## -->
</ul><!-- .children -->
</li><!-- #comment-## -->
			<li class="comment odd alt thread-even depth-1" id="li-comment-273">
				<div id="comment-273" class="comment-body media">

					<div class="comment-avartar pull-left">
						<img alt='' src='style/images/50f2d3179d198bcd3c5265c494eb51bf-75.jpg' srcset='http://2.gravatar.com/avatar/50f2d3179d198bcd3c5265c494eb51bf?s=150&amp;d=mm&amp;r=g 2x' class='avatar avatar-75 photo' height='75' width='75' />					</div>
					<div class="comment-context media-body">
						<div class="comment-head">
							<h3 class="comment-author">Guoxin Liu</h3>							<span class="comment-date">2017年7月13日</span>
						</div>

						
						<div class="comment-content">
							<p>你讲到别名(alias)我第一个想到应用的地方就是这里<br />
{<br />
  path: &#8216;/&#8217;,<br />
  component: Hello,<br />
  alias:&#8217;/home&#8217;<br />
}<br />
我在测试发现现在这个是可以用的<br />
vue version: 2.8.2</p>
						</div>

												<span class="comment-reply">
							<a rel='nofollow' class='comment-reply-link' href='http://jspang.com/2017/04/13/vue-router/?replytocom=273#respond' onclick='return addComment.moveForm( "comment-273", "273", "respond", "1461" )' aria-label='回复给Guoxin Liu'>Reply</a>						</span>

					</div>

				</div>
				</li><!-- #comment-## -->
			<li class="comment even thread-odd thread-alt depth-1" id="li-comment-289">
				<div id="comment-289" class="comment-body media">

					<div class="comment-avartar pull-left">
						<img alt='' src='style/images/0773434e44a4dbc658dc4868fecb41f6-75.jpg' srcset='http://0.gravatar.com/avatar/0773434e44a4dbc658dc4868fecb41f6?s=150&amp;d=mm&amp;r=g 2x' class='avatar avatar-75 photo' height='75' width='75' />					</div>
					<div class="comment-context media-body">
						<div class="comment-head">
							<h3 class="comment-author">yuyiguo</h3>							<span class="comment-date">2017年7月17日</span>
						</div>

						
						<div class="comment-content">
							<p>router这篇刷完了，有了前面四季的基础，阅读效率很高啊，赞。</p>
						</div>

												<span class="comment-reply">
							<a rel='nofollow' class='comment-reply-link' href='http://jspang.com/2017/04/13/vue-router/?replytocom=289#respond' onclick='return addComment.moveForm( "comment-289", "289", "respond", "1461" )' aria-label='回复给yuyiguo'>Reply</a>						</span>

					</div>

				</div>
				</li><!-- #comment-## -->
			<li class="comment odd alt thread-even depth-1" id="li-comment-313">
				<div id="comment-313" class="comment-body media">

					<div class="comment-avartar pull-left">
						<img alt='' src='style/images/01cc582ea0a23697166839c855e3cb0a-75.jpg' srcset='http://0.gravatar.com/avatar/01cc582ea0a23697166839c855e3cb0a?s=150&amp;d=mm&amp;r=g 2x' class='avatar avatar-75 photo' height='75' width='75' />					</div>
					<div class="comment-context media-body">
						<div class="comment-head">
							<h3 class="comment-author">jjf</h3>							<span class="comment-date">2017年7月24日</span>
						</div>

						
						<div class="comment-content">
							<p>怎么去掉router-link后面的竖线</p>
						</div>

												<span class="comment-reply">
							<a rel='nofollow' class='comment-reply-link' href='http://jspang.com/2017/04/13/vue-router/?replytocom=313#respond' onclick='return addComment.moveForm( "comment-313", "313", "respond", "1461" )' aria-label='回复给jjf'>Reply</a>						</span>

					</div>

				</div>
				<ul class="children">
			<li class="comment byuser comment-author-jspang001 bypostauthor even depth-2" id="li-comment-314">
				<div id="comment-314" class="comment-body media">

					<div class="comment-avartar pull-left">
						<img alt='' src='style/images/774555ea0f0ea3a59b61748c53c99fba-75.jpg' srcset='http://1.gravatar.com/avatar/774555ea0f0ea3a59b61748c53c99fba?s=150&amp;d=mm&amp;r=g 2x' class='avatar avatar-75 photo' height='75' width='75' />					</div>
					<div class="comment-context media-body">
						<div class="comment-head">
							<h3 class="comment-author"><a href='http://jspang.com' rel='external nofollow' class='url'>技术胖</a></h3>							<span class="comment-date">2017年7月25日</span>
						</div>

						
						<div class="comment-content">
							<p>可以请用history模式去掉多余的地址路径。</p>
						</div>

												<span class="comment-reply">
							<a rel='nofollow' class='comment-reply-link' href='http://jspang.com/2017/04/13/vue-router/?replytocom=314#respond' onclick='return addComment.moveForm( "comment-314", "314", "respond", "1461" )' aria-label='回复给技术胖'>Reply</a>						</span>

					</div>

				</div>
				</li><!-- #comment-## -->
</ul><!-- .children -->
</li><!-- #comment-## -->
			<li class="comment odd alt thread-odd thread-alt depth-1" id="li-comment-342">
				<div id="comment-342" class="comment-body media">

					<div class="comment-avartar pull-left">
						<img alt='' src='style/images/e7e2f493074443efefd42a15085b451f-75.jpg' srcset='http://2.gravatar.com/avatar/e7e2f493074443efefd42a15085b451f?s=150&amp;d=mm&amp;r=g 2x' class='avatar avatar-75 photo' height='75' width='75' />					</div>
					<div class="comment-context media-body">
						<div class="comment-head">
							<h3 class="comment-author">蔡正军</h3>							<span class="comment-date">2017年8月3日</span>
						</div>

						
						<div class="comment-content">
							<p>胖哥，你在第七节里面是说的gohome1不行，但是我这里采用alias:&#8217;/gohome1&#8217;是可以得</p>
						</div>

												<span class="comment-reply">
							<a rel='nofollow' class='comment-reply-link' href='http://jspang.com/2017/04/13/vue-router/?replytocom=342#respond' onclick='return addComment.moveForm( "comment-342", "342", "respond", "1461" )' aria-label='回复给蔡正军'>Reply</a>						</span>

					</div>

				</div>
				</li><!-- #comment-## -->
			<li class="comment even thread-even depth-1" id="li-comment-441">
				<div id="comment-441" class="comment-body media">

					<div class="comment-avartar pull-left">
						<img alt='' src='style/images/59d184372dc70206246fff8d02a6ad1d-75.jpg' srcset='http://2.gravatar.com/avatar/59d184372dc70206246fff8d02a6ad1d?s=150&amp;d=mm&amp;r=g 2x' class='avatar avatar-75 photo' height='75' width='75' />					</div>
					<div class="comment-context media-body">
						<div class="comment-head">
							<h3 class="comment-author">colorblind</h3>							<span class="comment-date">2017年8月17日</span>
						</div>

						
						<div class="comment-content">
							<p>整页路由  能简单的说下吗？？<br />
局部路由  解释得非常详细 非常nice</p>
						</div>

												<span class="comment-reply">
							<a rel='nofollow' class='comment-reply-link' href='http://jspang.com/2017/04/13/vue-router/?replytocom=441#respond' onclick='return addComment.moveForm( "comment-441", "441", "respond", "1461" )' aria-label='回复给colorblind'>Reply</a>						</span>

					</div>

				</div>
				<ul class="children">
			<li class="comment byuser comment-author-jspang001 bypostauthor odd alt depth-2" id="li-comment-442">
				<div id="comment-442" class="comment-body media">

					<div class="comment-avartar pull-left">
						<img alt='' src='style/images/774555ea0f0ea3a59b61748c53c99fba-75.jpg' srcset='http://1.gravatar.com/avatar/774555ea0f0ea3a59b61748c53c99fba?s=150&amp;d=mm&amp;r=g 2x' class='avatar avatar-75 photo' height='75' width='75' />					</div>
					<div class="comment-context media-body">
						<div class="comment-head">
							<h3 class="comment-author"><a href='http://jspang.com' rel='external nofollow' class='url'>技术胖</a></h3>							<span class="comment-date">2017年8月18日</span>
						</div>

						
						<div class="comment-content">
							<p>整页路由？Vue都是单页应用，局部刷新，不存在整页路由的。</p>
						</div>

												<span class="comment-reply">
							<a rel='nofollow' class='comment-reply-link' href='http://jspang.com/2017/04/13/vue-router/?replytocom=442#respond' onclick='return addComment.moveForm( "comment-442", "442", "respond", "1461" )' aria-label='回复给技术胖'>Reply</a>						</span>

					</div>

				</div>
				</li><!-- #comment-## -->
</ul><!-- .children -->
</li><!-- #comment-## -->
			<li class="comment even thread-odd thread-alt depth-1" id="li-comment-451">
				<div id="comment-451" class="comment-body media">

					<div class="comment-avartar pull-left">
						<img alt='' src='style/images/850a25457f1afaa144a6a2448d506ed5-75.jpg' srcset='http://2.gravatar.com/avatar/850a25457f1afaa144a6a2448d506ed5?s=150&amp;d=mm&amp;r=g 2x' class='avatar avatar-75 photo' height='75' width='75' />					</div>
					<div class="comment-context media-body">
						<div class="comment-head">
							<h3 class="comment-author">xiluo0202</h3>							<span class="comment-date">2017年8月21日</span>
						</div>

						
						<div class="comment-content">
							<p>别名请不要用在path为’/’中这个坑vue好像已经解决了，我测试中没有出现这个坑</p>
						</div>

												<span class="comment-reply">
							<a rel='nofollow' class='comment-reply-link' href='http://jspang.com/2017/04/13/vue-router/?replytocom=451#respond' onclick='return addComment.moveForm( "comment-451", "451", "respond", "1461" )' aria-label='回复给xiluo0202'>Reply</a>						</span>

					</div>

				</div>
				<ul class="children">
			<li class="comment byuser comment-author-jspang001 bypostauthor odd alt depth-2" id="li-comment-453">
				<div id="comment-453" class="comment-body media">

					<div class="comment-avartar pull-left">
						<img alt='' src='style/images/774555ea0f0ea3a59b61748c53c99fba-75.jpg' srcset='http://1.gravatar.com/avatar/774555ea0f0ea3a59b61748c53c99fba?s=150&amp;d=mm&amp;r=g 2x' class='avatar avatar-75 photo' height='75' width='75' />					</div>
					<div class="comment-context media-body">
						<div class="comment-head">
							<h3 class="comment-author"><a href='http://jspang.com' rel='external nofollow' class='url'>技术胖</a></h3>							<span class="comment-date">2017年8月21日</span>
						</div>

						
						<div class="comment-content">
							<p>最近已经解决了，不过讲课时还没有解决。</p>
						</div>

												<span class="comment-reply">
							<a rel='nofollow' class='comment-reply-link' href='http://jspang.com/2017/04/13/vue-router/?replytocom=453#respond' onclick='return addComment.moveForm( "comment-453", "453", "respond", "1461" )' aria-label='回复给技术胖'>Reply</a>						</span>

					</div>

				</div>
				</li><!-- #comment-## -->
</ul><!-- .children -->
</li><!-- #comment-## -->
			<li class="comment even thread-even depth-1" id="li-comment-480">
				<div id="comment-480" class="comment-body media">

					<div class="comment-avartar pull-left">
						<img alt='' src='style/images/63fe5f32ff76e2271e7d53facfcf36c5-75.jpg' srcset='http://0.gravatar.com/avatar/63fe5f32ff76e2271e7d53facfcf36c5?s=150&amp;d=mm&amp;r=g 2x' class='avatar avatar-75 photo' height='75' width='75' />					</div>
					<div class="comment-context media-body">
						<div class="comment-head">
							<h3 class="comment-author">吴建东</h3>							<span class="comment-date">2017年8月25日</span>
						</div>

						
						<div class="comment-content">
							<p>问题在尖括号里<br />
 routes: [<br />
    {<br />
      path: &#8216;/&#8217;,<br />
      name: &#8216;Hello&#8217;,<br />
      component: Hello<br />
    },{<br />
      path:&#8217;/hi&#8217;,<br />
      component:Hi,<br />
      children:[<br />
        {path:&#8217;/&#8217;,component:Hi},<br />
        {path:&#8217;hi1&#8242;,component:Hi1},<br />
        {path:&#8217;hi2&#8242;,component:Hi2},<br />
      ]<br />
    }<br />
  ]</p>
						</div>

												<span class="comment-reply">
							<a rel='nofollow' class='comment-reply-link' href='http://jspang.com/2017/04/13/vue-router/?replytocom=480#respond' onclick='return addComment.moveForm( "comment-480", "480", "respond", "1461" )' aria-label='回复给吴建东'>Reply</a>						</span>

					</div>

				</div>
				</li><!-- #comment-## -->
			<li class="comment odd alt thread-odd thread-alt depth-1" id="li-comment-483">
				<div id="comment-483" class="comment-body media">

					<div class="comment-avartar pull-left">
						<img alt='' src='style/images/63fe5f32ff76e2271e7d53facfcf36c5-75.jpg' srcset='http://0.gravatar.com/avatar/63fe5f32ff76e2271e7d53facfcf36c5?s=150&amp;d=mm&amp;r=g 2x' class='avatar avatar-75 photo' height='75' width='75' />					</div>
					<div class="comment-context media-body">
						<div class="comment-head">
							<h3 class="comment-author">吴建东</h3>							<span class="comment-date">2017年8月25日</span>
						</div>

						
						<div class="comment-content">
							<p>我问的问题自己解决了  感谢你胖哥 我会一直支持你的 加油胖哥!</p>
						</div>

												<span class="comment-reply">
							<a rel='nofollow' class='comment-reply-link' href='http://jspang.com/2017/04/13/vue-router/?replytocom=483#respond' onclick='return addComment.moveForm( "comment-483", "483", "respond", "1461" )' aria-label='回复给吴建东'>Reply</a>						</span>

					</div>

				</div>
				</li><!-- #comment-## -->
			<li class="comment even thread-even depth-1" id="li-comment-519">
				<div id="comment-519" class="comment-body media">

					<div class="comment-avartar pull-left">
						<img alt='' src='style/images/545c9c88851018f3ecd60efa76a80268-75.jpg' srcset='http://2.gravatar.com/avatar/545c9c88851018f3ecd60efa76a80268?s=150&amp;d=mm&amp;r=g 2x' class='avatar avatar-75 photo' height='75' width='75' />					</div>
					<div class="comment-context media-body">
						<div class="comment-head">
							<h3 class="comment-author">戴海林</h3>							<span class="comment-date">2017年9月5日</span>
						</div>

						
						<div class="comment-content">
							<p>路由配置文件中的钩子函数的代码中</p>
<p>后面少写了一个 }</p>
						</div>

												<span class="comment-reply">
							<a rel='nofollow' class='comment-reply-link' href='http://jspang.com/2017/04/13/vue-router/?replytocom=519#respond' onclick='return addComment.moveForm( "comment-519", "519", "respond", "1461" )' aria-label='回复给戴海林'>Reply</a>						</span>

					</div>

				</div>
				</li><!-- #comment-## -->
			<li class="comment odd alt thread-odd thread-alt depth-1" id="li-comment-530">
				<div id="comment-530" class="comment-body media">

					<div class="comment-avartar pull-left">
						<img alt='' src='style/images/dbb53384472c874f05e461e675c685d3-75.jpg' srcset='http://1.gravatar.com/avatar/dbb53384472c874f05e461e675c685d3?s=150&amp;d=mm&amp;r=g 2x' class='avatar avatar-75 photo' height='75' width='75' />					</div>
					<div class="comment-context media-body">
						<div class="comment-head">
							<h3 class="comment-author">刘卓</h3>							<span class="comment-date">2017年9月6日</span>
						</div>

						
						<div class="comment-content">
							<p>这节也都学完了 感谢胖哥！ 不过还是没搞懂，用vue脚手架写完的页面，该怎么上传到自己的空间中，之前都是直接用html css js写完用fxp上传，这里面的文件都是vue什么的，该怎么上传呢？</p>
						</div>

												<span class="comment-reply">
							<a rel='nofollow' class='comment-reply-link' href='http://jspang.com/2017/04/13/vue-router/?replytocom=530#respond' onclick='return addComment.moveForm( "comment-530", "530", "respond", "1461" )' aria-label='回复给刘卓'>Reply</a>						</span>

					</div>

				</div>
				<ul class="children">
			<li class="comment byuser comment-author-jspang001 bypostauthor even depth-2" id="li-comment-533">
				<div id="comment-533" class="comment-body media">

					<div class="comment-avartar pull-left">
						<img alt='' src='style/images/774555ea0f0ea3a59b61748c53c99fba-75.jpg' srcset='http://1.gravatar.com/avatar/774555ea0f0ea3a59b61748c53c99fba?s=150&amp;d=mm&amp;r=g 2x' class='avatar avatar-75 photo' height='75' width='75' />					</div>
					<div class="comment-context media-body">
						<div class="comment-head">
							<h3 class="comment-author"><a href='http://jspang.com' rel='external nofollow' class='url'>技术胖</a></h3>							<span class="comment-date">2017年9月7日</span>
						</div>

						
						<div class="comment-content">
							<p>你可以继续学习Vue的教程，比如我在实战中就详细讲解了如何打包上传到服务器上。</p>
						</div>

												<span class="comment-reply">
							<a rel='nofollow' class='comment-reply-link' href='http://jspang.com/2017/04/13/vue-router/?replytocom=533#respond' onclick='return addComment.moveForm( "comment-533", "533", "respond", "1461" )' aria-label='回复给技术胖'>Reply</a>						</span>

					</div>

				</div>
				</li><!-- #comment-## -->
</ul><!-- .children -->
</li><!-- #comment-## -->
			<li class="comment odd alt thread-even depth-1" id="li-comment-568">
				<div id="comment-568" class="comment-body media">

					<div class="comment-avartar pull-left">
						<img alt='' src='style/images/9b49382b4ecc792de441f74135aa38c8-75.jpg' srcset='http://0.gravatar.com/avatar/9b49382b4ecc792de441f74135aa38c8?s=150&amp;d=mm&amp;r=g 2x' class='avatar avatar-75 photo' height='75' width='75' />					</div>
					<div class="comment-context media-body">
						<div class="comment-head">
							<h3 class="comment-author">Jharden</h3>							<span class="comment-date">2017年9月16日</span>
						</div>

						
						<div class="comment-content">
							<p>npm run build打包会生成一个dist文件夹，上传dist文件夹里的文件就好了</p>
						</div>

												<span class="comment-reply">
							<a rel='nofollow' class='comment-reply-link' href='http://jspang.com/2017/04/13/vue-router/?replytocom=568#respond' onclick='return addComment.moveForm( "comment-568", "568", "respond", "1461" )' aria-label='回复给Jharden'>Reply</a>						</span>

					</div>

				</div>
				</li><!-- #comment-## -->
			<li class="comment even thread-odd thread-alt depth-1" id="li-comment-624">
				<div id="comment-624" class="comment-body media">

					<div class="comment-avartar pull-left">
						<img alt='' src='style/images/8408fcf397a59d60c1cd0531dc308edf-75.jpg' srcset='http://2.gravatar.com/avatar/8408fcf397a59d60c1cd0531dc308edf?s=150&amp;d=mm&amp;r=g 2x' class='avatar avatar-75 photo' height='75' width='75' />					</div>
					<div class="comment-context media-body">
						<div class="comment-head">
							<h3 class="comment-author">鹏飞</h3>							<span class="comment-date">2017年9月19日</span>
						</div>

						
						<div class="comment-content">
							<p><code></code><code><br />
children:[<br />
        {path:'/',component:Hi},<br />
        {path:'hi1',component:Hi1},<br />
        {path:'hi2',component:Hi2},<br />
      ]<br />
</code><code></code><br />
胖哥, 第二节第四小段,配置子页面导航是不是要把<code> {path:'/',component:Hi},</code>不变,在children里面直接加2个子页面路由path即可,我这么配置,页面显示空白,还有warning,把当前页面的path拿出来就可以了,我没看视频,不知道是不是文档和视频没对上啊</p>
						</div>

												<span class="comment-reply">
							<a rel='nofollow' class='comment-reply-link' href='http://jspang.com/2017/04/13/vue-router/?replytocom=624#respond' onclick='return addComment.moveForm( "comment-624", "624", "respond", "1461" )' aria-label='回复给鹏飞'>Reply</a>						</span>

					</div>

				</div>
				<ul class="children">
			<li class="comment odd alt depth-2" id="li-comment-645">
				<div id="comment-645" class="comment-body media">

					<div class="comment-avartar pull-left">
						<img alt='' src='style/images/722a1736b635ebbee22f908378e82230-75.jpg' srcset='http://1.gravatar.com/avatar/722a1736b635ebbee22f908378e82230?s=150&amp;d=mm&amp;r=g 2x' class='avatar avatar-75 photo' height='75' width='75' />					</div>
					<div class="comment-context media-body">
						<div class="comment-head">
							<h3 class="comment-author">Iven</h3>							<span class="comment-date">2017年9月21日</span>
						</div>

						
						<div class="comment-content">
							<p>你把warning贴出来看看</p>
						</div>

												<span class="comment-reply">
							<a rel='nofollow' class='comment-reply-link' href='http://jspang.com/2017/04/13/vue-router/?replytocom=645#respond' onclick='return addComment.moveForm( "comment-645", "645", "respond", "1461" )' aria-label='回复给Iven'>Reply</a>						</span>

					</div>

				</div>
				</li><!-- #comment-## -->
</ul><!-- .children -->
</li><!-- #comment-## -->
			<li class="comment even thread-even depth-1" id="li-comment-637">
				<div id="comment-637" class="comment-body media">

					<div class="comment-avartar pull-left">
						<img alt='' src='style/images/d4777f79a86705b3e029373b4e57edbb-75.jpg' srcset='http://1.gravatar.com/avatar/d4777f79a86705b3e029373b4e57edbb?s=150&amp;d=mm&amp;r=g 2x' class='avatar avatar-75 photo' height='75' width='75' />					</div>
					<div class="comment-context media-body">
						<div class="comment-head">
							<h3 class="comment-author">Charles</h3>							<span class="comment-date">2017年9月20日</span>
						</div>

						
						<div class="comment-content">
							<p>第三节：src/reouter/index.js，router多了个e</p>
						</div>

												<span class="comment-reply">
							<a rel='nofollow' class='comment-reply-link' href='http://jspang.com/2017/04/13/vue-router/?replytocom=637#respond' onclick='return addComment.moveForm( "comment-637", "637", "respond", "1461" )' aria-label='回复给Charles'>Reply</a>						</span>

					</div>

				</div>
				</li><!-- #comment-## -->
			<li class="comment odd alt thread-odd thread-alt depth-1" id="li-comment-646">
				<div id="comment-646" class="comment-body media">

					<div class="comment-avartar pull-left">
						<img alt='' src='style/images/722a1736b635ebbee22f908378e82230-75.jpg' srcset='http://1.gravatar.com/avatar/722a1736b635ebbee22f908378e82230?s=150&amp;d=mm&amp;r=g 2x' class='avatar avatar-75 photo' height='75' width='75' />					</div>
					<div class="comment-context media-body">
						<div class="comment-head">
							<h3 class="comment-author">Iven</h3>							<span class="comment-date">2017年9月21日</span>
						</div>

						
						<div class="comment-content">
							<p>胖哥，想了解不下router-link, router-view和路由文件之间是执行机制，胖哥对这方面研究过吗？<br />
还有，胖哥有微博号没，可以宣传自己的博客，圈粉会很快的！</p>
						</div>

												<span class="comment-reply">
							<a rel='nofollow' class='comment-reply-link' href='http://jspang.com/2017/04/13/vue-router/?replytocom=646#respond' onclick='return addComment.moveForm( "comment-646", "646", "respond", "1461" )' aria-label='回复给Iven'>Reply</a>						</span>

					</div>

				</div>
				</li><!-- #comment-## -->
			<li class="comment even thread-even depth-1" id="li-comment-647">
				<div id="comment-647" class="comment-body media">

					<div class="comment-avartar pull-left">
						<img alt='' src='style/images/e986117b91d262d326fb35f3423f0727-75.jpg' srcset='http://2.gravatar.com/avatar/e986117b91d262d326fb35f3423f0727?s=150&amp;d=mm&amp;r=g 2x' class='avatar avatar-75 photo' height='75' width='75' />					</div>
					<div class="comment-context media-body">
						<div class="comment-head">
							<h3 class="comment-author">zhao</h3>							<span class="comment-date">2017年9月21日</span>
						</div>

						
						<div class="comment-content">
							<p>为什么{<br />
  path:&#8217;/goParams/:newsId(\\d+)/:newsTitle&#8217;,<br />
  redirect:&#8217;/params/:newsId(\\d+)/:newsTitle&#8217;<br />
} redirect换成去默认页，或者没有传参的路径就不行</p>
						</div>

												<span class="comment-reply">
							<a rel='nofollow' class='comment-reply-link' href='http://jspang.com/2017/04/13/vue-router/?replytocom=647#respond' onclick='return addComment.moveForm( "comment-647", "647", "respond", "1461" )' aria-label='回复给zhao'>Reply</a>						</span>

					</div>

				</div>
				</li><!-- #comment-## -->
			<li class="comment odd alt thread-odd thread-alt depth-1" id="li-comment-664">
				<div id="comment-664" class="comment-body media">

					<div class="comment-avartar pull-left">
						<img alt='' src='style/images/28fce2c3c052413485e6ab81342f4ae9-75.jpg' srcset='http://2.gravatar.com/avatar/28fce2c3c052413485e6ab81342f4ae9?s=150&amp;d=mm&amp;r=g 2x' class='avatar avatar-75 photo' height='75' width='75' />					</div>
					<div class="comment-context media-body">
						<div class="comment-head">
							<h3 class="comment-author"><a href='http://chaiguanpeng.github.io' rel='external nofollow' class='url'>言Sir</a></h3>							<span class="comment-date">2017年9月26日</span>
						</div>

						
						<div class="comment-content">
							<p>胖哥，第二节中hi页面为什么有两行<br />
i am Hi page<br />
i am Hi page</p>
						</div>

												<span class="comment-reply">
							<a rel='nofollow' class='comment-reply-link' href='http://jspang.com/2017/04/13/vue-router/?replytocom=664#respond' onclick='return addComment.moveForm( "comment-664", "664", "respond", "1461" )' aria-label='回复给言Sir'>Reply</a>						</span>

					</div>

				</div>
				</li><!-- #comment-## -->
			<li class="comment even thread-even depth-1" id="li-comment-670">
				<div id="comment-670" class="comment-body media">

					<div class="comment-avartar pull-left">
						<img alt='' src='style/images/28fce2c3c052413485e6ab81342f4ae9-75.jpg' srcset='http://2.gravatar.com/avatar/28fce2c3c052413485e6ab81342f4ae9?s=150&amp;d=mm&amp;r=g 2x' class='avatar avatar-75 photo' height='75' width='75' />					</div>
					<div class="comment-context media-body">
						<div class="comment-head">
							<h3 class="comment-author"><a href='http://chaiguanpeng.github.io' rel='external nofollow' class='url'>言Sir</a></h3>							<span class="comment-date">2017年9月27日</span>
						</div>

						
						<div class="comment-content">
							<p>胖哥， {<br />
  path: &#8216;/&#8217;,      //链接路径<br />
      name: &#8216;hello&#8217;,<br />
      component:Hello,<br />
      alias:&#8221;/home1&#8243;<br />
}<br />
我这个别名竟然可以跳到首页</p>
						</div>

												<span class="comment-reply">
							<a rel='nofollow' class='comment-reply-link' href='http://jspang.com/2017/04/13/vue-router/?replytocom=670#respond' onclick='return addComment.moveForm( "comment-670", "670", "respond", "1461" )' aria-label='回复给言Sir'>Reply</a>						</span>

					</div>

				</div>
				</li><!-- #comment-## -->
			<li class="comment odd alt thread-odd thread-alt depth-1" id="li-comment-687">
				<div id="comment-687" class="comment-body media">

					<div class="comment-avartar pull-left">
						<img alt='' src='style/images/84f5a6a9253328701dc2c962514f64bf-75.jpg' srcset='http://2.gravatar.com/avatar/84f5a6a9253328701dc2c962514f64bf?s=150&amp;d=mm&amp;r=g 2x' class='avatar avatar-75 photo' height='75' width='75' />					</div>
					<div class="comment-context media-body">
						<div class="comment-head">
							<h3 class="comment-author">趴着睡</h3>							<span class="comment-date">2017年10月1日</span>
						</div>

						
						<div class="comment-content">
							<p>感谢胖哥，感觉对我这种刚出来的培训狗帮助很大</p>
						</div>

												<span class="comment-reply">
							<a rel='nofollow' class='comment-reply-link' href='http://jspang.com/2017/04/13/vue-router/?replytocom=687#respond' onclick='return addComment.moveForm( "comment-687", "687", "respond", "1461" )' aria-label='回复给趴着睡'>Reply</a>						</span>

					</div>

				</div>
				</li><!-- #comment-## -->
			<li class="comment even thread-even depth-1" id="li-comment-718">
				<div id="comment-718" class="comment-body media">

					<div class="comment-avartar pull-left">
						<img alt='' src='style/images/4a269887df1ae4dd493a5fc3af5297dc-75.jpg' srcset='http://1.gravatar.com/avatar/4a269887df1ae4dd493a5fc3af5297dc?s=150&amp;d=mm&amp;r=g 2x' class='avatar avatar-75 photo' height='75' width='75' />					</div>
					<div class="comment-context media-body">
						<div class="comment-head">
							<h3 class="comment-author">Jonas.Wang</h3>							<span class="comment-date">2017年10月12日</span>
						</div>

						
						<div class="comment-content">
							<p>首先感谢胖哥，看这个视频后，确实对新手帮助很大。其次我想说一下我的困惑，我本身是一位java程序员。也是初次接触vuejs。看完胖哥的视频，感觉自己学会了好多东西。但是我们目前的项目是vuejs+springmvc+spring+mybatis。在会了vue的基础上，再在项目里去搭建和开发，感觉差别特别大。对我这种新手来说，有种无从下手的感觉。希望胖哥能讲一下，如何在这种和后端语言结合vuejs的产品搭建，以及与后台进行数据交互，参数传递等做一个视频。</p>
						</div>

												<span class="comment-reply">
							<a rel='nofollow' class='comment-reply-link' href='http://jspang.com/2017/04/13/vue-router/?replytocom=718#respond' onclick='return addComment.moveForm( "comment-718", "718", "respond", "1461" )' aria-label='回复给Jonas.Wang'>Reply</a>						</span>

					</div>

				</div>
				<ul class="children">
			<li class="comment byuser comment-author-jspang001 bypostauthor odd alt depth-2" id="li-comment-748">
				<div id="comment-748" class="comment-body media">

					<div class="comment-avartar pull-left">
						<img alt='' src='style/images/774555ea0f0ea3a59b61748c53c99fba-75.jpg' srcset='http://1.gravatar.com/avatar/774555ea0f0ea3a59b61748c53c99fba?s=150&amp;d=mm&amp;r=g 2x' class='avatar avatar-75 photo' height='75' width='75' />					</div>
					<div class="comment-context media-body">
						<div class="comment-head">
							<h3 class="comment-author"><a href='http://jspang.com' rel='external nofollow' class='url'>技术胖</a></h3>							<span class="comment-date">2017年10月22日</span>
						</div>

						
						<div class="comment-content">
							<p>Vue是前后端分离的，你不需要考虑后端的东西，只要通过接口互相调用就可以了。</p>
						</div>

												<span class="comment-reply">
							<a rel='nofollow' class='comment-reply-link' href='http://jspang.com/2017/04/13/vue-router/?replytocom=748#respond' onclick='return addComment.moveForm( "comment-748", "748", "respond", "1461" )' aria-label='回复给技术胖'>Reply</a>						</span>

					</div>

				</div>
				</li><!-- #comment-## -->
</ul><!-- .children -->
</li><!-- #comment-## -->
			<li class="comment even thread-odd thread-alt depth-1" id="li-comment-721">
				<div id="comment-721" class="comment-body media">

					<div class="comment-avartar pull-left">
						<img alt='' src='style/images/f30201dae0905c8c19d90bfc930041e8-75.jpg' srcset='http://0.gravatar.com/avatar/f30201dae0905c8c19d90bfc930041e8?s=150&amp;d=mm&amp;r=g 2x' class='avatar avatar-75 photo' height='75' width='75' />					</div>
					<div class="comment-context media-body">
						<div class="comment-head">
							<h3 class="comment-author">小冯</h3>							<span class="comment-date">2017年10月13日</span>
						</div>

						
						<div class="comment-content">
							<p>你的三节说有子路由的情况下name不起作用，但是我试过可以的啊</p>
						</div>

												<span class="comment-reply">
							<a rel='nofollow' class='comment-reply-link' href='http://jspang.com/2017/04/13/vue-router/?replytocom=721#respond' onclick='return addComment.moveForm( "comment-721", "721", "respond", "1461" )' aria-label='回复给小冯'>Reply</a>						</span>

					</div>

				</div>
				</li><!-- #comment-## -->
        </ul><!-- .comment-list -->

        
        
    
    	<div id="respond" class="comment-respond">
		<h3 id="reply-title" class="comment-reply-title">发表评论 <small><a rel="nofollow" id="cancel-comment-reply-link" href="/2017/04/13/vue-router/#respond" style="display:none;">取消回复</a></small></h3>			<form action="http://jspang.com/wp-comments-post.php" method="post" id="commentform" class="comment-form row">
				<div class="clearfix"></div><div class="col-md-12"><textarea id="comment" placeholder="Write your comment..." name="comment" aria-required="true"></textarea></div><div class="col-md-4"><input id="author" name="author" type="text" placeholder="Name *" value="" size="30" aria-required='true'/></div>
<div class="col-md-4"><input id="email" name="email" type="text" placeholder="Email *" value="" size="30" aria-required='true'/></div>
<div class="col-md-4"><input id="url" name="url" type="text" placeholder="Website" value="" size="30"/></div>
<p class="aiowps-captcha"><label for="aiowps-captcha-answer">请输入数字答案:</label><div class="aiowps-captcha-equation"><strong>20 &#43; 3 = <input type="hidden" name="aiowps-captcha-string-info" id="aiowps-captcha-string-info" value="1gsdgbqx1i" /><input type="hidden" name="aiowps-captcha-temp-string" id="aiowps-captcha-temp-string" value="1509360491" /><input type="text" size="2" id="aiowps-captcha-answer" name="aiowps-captcha-answer" value="" autocomplete="off" /></strong></div></p><p class="form-submit col-md-12"><input name="submit" type="submit" id="submit" class="submit" value="Post Comment" /> <input type='hidden' name='comment_post_ID' value='1461' id='comment_post_ID' />
<input type='hidden' name='comment_parent' id='comment_parent' value='0' />
</p><p style="display: none;"><input type="hidden" id="akismet_comment_nonce" name="akismet_comment_nonce" value="c824df9844" /></p><p style="display: none;"><input type="hidden" id="ak_js" name="ak_js" value="30"/></p>			</form>
			</div><!-- #respond -->
	</div>					</div>
				
			
					</div>

		<div class="col-md-4">
    <div class="primary-sidebar widget-area" role="complementary">
        <aside id="aster_about_base_widget-2" class="widget widget_aster_about_base_widget"><h1 class="widget-title text-uppercase">博主介绍</h1>			
			<div class="about-widget">
			
						
						<div class="about-me-content">技术胖：10年一线互联网程序开发经验（仍在一线奋战），做过J2EE、PHP和前端，现在主要关注前端领域。每年帮助50万以上前端爱好者学习。 除一线程序员外，博主还有以下身份，但只在装逼时使用。 掘金专栏作者，GitChat特邀讲师，纯金UED金牌讲师，CSDN学院知名讲师，百度传课前端讲师。</div>
				
			
			</div>
			
		</aside><aside id="search-2" class="widget widget_search"><form role="search" method="get" id="search-form" action="http://jspang.com/">
    <div class="aster-search-form">
		<input type="text" placeholder="Search and hit enter&hellip;" value="" name="s" id="s" />
	 </div>
</form></aside><aside id="text-2" class="widget widget_text"><h1 class="widget-title text-uppercase">公告</h1>			<div class="textwidget"><div></div>
<div style="color: #f44336; font-weight: blod;">广告事宜请联系：QQ：454275609</p>
<hr />
<p><strong>QQ群1：364140450(满)</strong></p>
</div>
<div style="color: #f44336; font-weight: blod;"><strong>QQ群2：524520566（600人）</strong></div>
<div style="color: #f44336; font-weight: blod;">进群和2000多名前端关注者一起进步，<br />
我每周都会上线解答群内问题。</div>
<hr />
<ul>
<li>《webpack3.x 成神之路》更新完成。</li>
<li>开始更新《React全家桶》教程，每周三节，请小伙伴关注。</li>
<li>在看视频课程中，如果有疑问，可以发邮件给技术胖。邮件地址：web0432@126.com ,技术胖会在下班后给你回复邮件，解决你的问题。</li>
</ul>
</div>
		</aside><aside id="text-6" class="widget widget_text"><h1 class="widget-title text-uppercase">如果文章对您有帮助，请打赏：</h1>			<div class="textwidget"><p>						<style>
				
					#tab_container_1817 {
				overflow:hidden;
				display:block;
				width:100%;
				border:0px solid #ddd;
				margin-bottom:30px;
				}

#tab_container_1817 .tab-content{
		padding:20px;
		border: 1px solid #e6e6e6 !important;
		margin-top: 0px;
		background-color:#ffffff !important;
		color: #000000 !important;
		font-size:16px !important;
		font-family: Open Sans !important;
		
				border: 1px solid #e6e6e6 !important;
		}
#tab_container_1817 .wpsm_nav-tabs {
    border-bottom: 0px solid #ddd;
}
#tab_container_1817 .wpsm_nav-tabs > li.active > a, #tab_container_1817 .wpsm_nav-tabs > li.active > a:hover, #tab_container_1817 .wpsm_nav-tabs > li.active > a:focus {
	color: #000000 !important;
	cursor: default;
	background-color: #ffffff !important;
	border: 1px solid #e6e6e6 !important;
}

#tab_container_1817 .wpsm_nav-tabs > li > a {
    margin-right: 0px !important; 
    line-height: 1.42857143 !important;
    border: 1px solid #d50000 !important;
    border-radius: 0px 0px 0 0 !important; 
	background-color: #e80606 !important;
	color: #000000 !important;
	padding: 15px 18px 15px 18px !important;
	text-decoration: none !important;
	font-size: 14px !important;
	text-align:center !important;
	font-family: Open Sans !important;
}
#tab_container_1817 .wpsm_nav-tabs > li > a:focus {
outline: 0px !important;
}

#tab_container_1817 .wpsm_nav-tabs > li > a:before {
	display:none !important;
}
#tab_container_1817 .wpsm_nav-tabs > li > a:after {
	display:none !important ;
}
#tab_container_1817 .wpsm_nav-tabs > li{
padding:0px !important ;
margin:0px;
}

#tab_container_1817 .wpsm_nav-tabs > li > a:hover , #tab_container_1817 .wpsm_nav-tabs > li > a:focus {
    color: #000000 !important;
    background-color: #e80606 !important;
	border: 1px solid #d50000 !important;
	
}
#tab_container_1817 .wpsm_nav-tabs > li > a .fa{

margin-right:5px !important;

margin-left:5px !important;


}

		#tab_container_1817 .wpsm_nav-tabs a{
			background-image: url(style/images/img/style-noise.png);
			background-position: 0 0;
			background-repeat: repeat-x;
			}
			


#tab_container_1817 .wpsm_nav-tabs > li {
    float: left;
    margin-bottom: -1px !important;
	margin-right:0px !important; 
}


#tab_container_1817 .tab-content{
overflow:hidden !important;
}


@media (min-width: 769px) {

	#tab_container_1817 .wpsm_nav-tabs > li{
	float:left !important ;
		margin-right:-1px !important;
			}
	#tab_container_1817 .wpsm_nav-tabs{
	float:none !important;
	margin:0px !important;
	}

	/* Margin CSS FOR Horizontal */
	#tab_container_1817 .wpsm_nav-tabs > li {
				
	}
	#tab_container_1817 .wpsm_nav{
			}

}



@media (max-width: 768px) {
	#tab_container_1817 .wpsm_nav-tabs > li {
				
	}
	#tab_container_1817 .wpsm_nav{
			}
}


.wpsm_nav-tabs li:before{
display:none !important;
}

@media (max-width: 768px) {
		
		.wpsm_nav-tabs{
		margin-left:0px !important;
		margin-right:0px !important; 
		
	}
		#tab_container_1817 .wpsm_nav-tabs > li{
		float:none !important;
	}
		
	
}
				</style>
				<div id="tab_container_1817" >
	 
					<ul class="wpsm_nav wpsm_nav-tabs" role="tablist" id="myTab_1817">
							
							<li role="presentation"  class="active"  >
								<a href="#tabs_desc_1817_1" aria-controls="tabs_desc_1817_1" role="tab" data-toggle="tab">
									
																																		
																						
											<span>赏5元</span>
											
																						
																				
										
									
								</a>
							</li>
							
							<li role="presentation"  >
								<a href="#tabs_desc_1817_2" aria-controls="tabs_desc_1817_2" role="tab" data-toggle="tab">
									
																																		
																						
											<span>赏15元</span>
											
																						
																				
										
									
								</a>
							</li>
							
							<li role="presentation"  >
								<a href="#tabs_desc_1817_3" aria-controls="tabs_desc_1817_3" role="tab" data-toggle="tab">
									
																																		
																						
											<span>赏29元</span>
											
																						
																				
										
									
								</a>
							</li>
											 </ul>

					  <!-- Tab panes -->
					  <div class="tab-content" id="tab-content_1817">
												 <div role="tabpanel" class="tab-pane  in active " id="tabs_desc_1817_1">
								<img src="style/images/weixin05.jpg" width="100%" " class="alignnone size-medium" />						 </div>
												 <div role="tabpanel" class="tab-pane " id="tabs_desc_1817_2">
								<img src="style/images/weixin15.jpg" width="100%" " class="alignnone size-medium" />						 </div>
												 <div role="tabpanel" class="tab-pane " id="tabs_desc_1817_3">
								<img src="style/images/weixin29.jpg" width="100%" " class="alignnone size-medium" />						 </div>
							
					 </div>
					 
				 </div>
 <script>
		jQuery(function () {
			jQuery('#myTab_1817 a:first').tab('show')
		});
		
				jQuery(function(){
			var b="fadeIn";
			var c;
			var a;
			d(jQuery("#myTab_1817 a"),jQuery("#tab-content_1817"));function d(e,f,g){
				e.click(function(i){
					i.preventDefault();
					jQuery(this).tab("show");
					var h=jQuery(this).data("easein");
					if(c){c.removeClass(a);}
					if(h){f.find("div.active").addClass("animated "+h);a=h;}
					else{if(g){f.find("div.active").addClass("animated "+g);a=g;}else{f.find("div.active").addClass("animated "+b);a=b;}}c=f.find("div.active");
				});
			}
		});
			</script>
				
			<br />
<span style="color: red;">打赏后你将获得以下特权：</span></p>
<p>1.加入技术胖前端微信交流群。<br />
2.收听《前端成神软技能》语音分享版。<br />
3.和10年程序老司机（技术胖）成为微信好友。<br />
4.获得本站前端视频离线高清版。</p>
<hr />
<p><span style="color: red;">打赏后获得特权流程：</span><br />
1.扫二维码添加技术胖私人微信。<br />
<img src="style/images/232323121111111111.jpg" width="50%" /></p>
<p>2.添加微信成功后，发送打赏截图。</p>
<p>3.技术胖拉你入群，查看群公告。</p>
</div>
		</aside><aside id="text-8" class="widget widget_text"><h1 class="widget-title text-uppercase">视频教程</h1>			<div class="textwidget"><p>最新视频</p>
<ol>
<li><a href="http://jspang.com/2017/06/03/es6/" rel="bookmark">技术胖带你玩转ES6视频教程</a></li>
</ol>
<p>Vue视频合集-<small>可按此顺序学习</small></p>
<ol>
<li><a href="http://jspang.com/2017/02/23/vue2_01/" rel="bookmark">【第一季】VUE2.0内部指令(共8集)</a></li>
<li><a href="http://jspang.com/2017/03/14/vue2_02/" rel="bookmark">【第二季】VUE2.0全局API(共9集)</a></li>
<li><a href="http://jspang.com/2017/03/26/vue3/" rel="bookmark">【第三季】VUE2.0选项（共6集）</a></li>
<li><a href="http://jspang.com/2017/04/09/vue2_4/" rel="bookmark">【第四季】VUE2.0实例内置组件（共4集）</a></li>
<li><a href="http://jspang.com/2017/04/10/vue-cli/" rel="bookmark">技术胖的VUE-CLI 视频教程</a></li>
<li><a href="http://jspang.com/2017/04/13/vue-router/" rel="bookmark">技术胖的VUE-ROUTER视频教程</a></li>
<li><a href="http://jspang.com/2017/05/03/vuex/" rel="bookmark">技术胖的VUEX视频教程</a></li>
<li><a href="http://jspang.com/2017/05/22/vuedemo/" rel="bookmark">VUE实战视频-快餐店收银系统</a></li>
</ol>
<hr />
<p>CocosCreator视频（前端游戏制作）</p>
<ol>
<li><a href="http://jspang.com/category/learn/jichu/">CC基础视频教程</a></li>
<li><a href="http://jspang.com/category/learn/shizhan/">CC实战-勇闯地下室</a></li>
</ol>
<hr />
<p>其它视频</p>
<ol>
<li><a href="http://jspang.com/2016/11/24/webpack/">Webpack基础视频</a></li>
<li><a href="http://jspang.com/2017/01/11/fabricjsbasic/" rel="bookmark">步入FABRIC.JS 中文视频教程</a></li>
</ol>
</div>
		</aside><aside id="text-5" class="widget widget_text"><h1 class="widget-title text-uppercase">捐赠墙</h1>			<div class="textwidget">
<hr/>
<div>以下人员在服务器购买费用中捐款，所以本站由以下人员共同建立。2017年5月22日重新上线。</div>
<div style="color:#f44336;border-bottom:1px solid #e0e0e0;padding:10px 0px;" >土豪榜</div>
<div>
高丽-59元，
周老六-147元，
风飞沙-118元
</div>
<div  style="color:#f44336;border-bottom:1px solid #e0e0e0;;padding:10px 0px;">真情铁粉</div>
<div>
婷婷-19元，
fillter-29元，
军哥哥-29元，
贪吃鱼儿-29元，
妖妖-29元，
追风-48元，
吴思超-29元，
金秀学-29元，
十月弓虽-29元，
谭兵-29元，
千夜一夕-29元，
jason-29元，
上帝没给答案-19元，
土豆-19元，
Tempest-29元，
馥镬-29，
詹小云-19元，
hasaki-29元，
落_尘-29元，
汪胜强-29元，
ginway-29元，
吕檀溪-29元，
Arical-29元，
lishalom-29元，
桂玉青-19元，
张杨-19元，
Peach-29元，
国豪-19元，
Kevin-29元，
孟凡兴-29元，
谢启鸿-19元，
bwhite-29元，
null-29元，
yuyi_guo-19元，
张易得-29元，
Rewa-Fang-29元，
小钟-29元，
木白-29元，
jackyrong-19元，
咚咚-29元，
笑容-29元，
vanjon-29元，
一曲琴殇-19元，
橙橙同学-29元，
王畅-19元，
咚咚-29元，
野蛮的橘子-29元，
路道老粗-29元，
建豪-29元

</div>
</div>
		</aside>    </div>
</div>

	</div>
</div>

<footer id="footer">
	<div class="copy-right-text text-center">
		<div class="container">
			<div class="row">
				<div class="col-md-12">
					<p>Copyright &copy; 2017 <a href="http://jspang.com/" rel="home">技术胖-胜洪宇关注web前端技术</a>. All rights reserved.<br>Powered by <a href="http://jspang.com">jspang.com</a>.备案号 <a href="http://icp.chinaz.com/info?q=jspang.com">吉ICP备11005377号-3</a></p>
				</div>
			</div>
		</div>
	</div><!-- /Copyright Text -->
</footer><!-- /#Footer -->


<div class="scroll-up">
    <a href="#"><i class="fa fa-angle-up"></i></a>
</div>
<!-- Scroll Up -->

<link rel='stylesheet' id='wechat-reward-css'  href='style/css/wechat-reward.css' type='text/css' media='all' />
<script type='text/javascript' src='style/js/smartideo.js'></script>
<script type='text/javascript'>
/* <![CDATA[ */
var tocplus = {"smooth_scroll":"1","visibility_show":"\u663e\u793a","visibility_hide":"\u9690\u85cf","width":"Auto"};
/* ]]> */
</script>
<script type='text/javascript' src='style/js/front.min.js'></script>
<script type='text/javascript' src='style/js/bootstrap.js'></script>
<script type='text/javascript'>
/* <![CDATA[ */
var viewsCacheL10n = {"admin_ajax_url":"http:\/\/jspang.com\/wp-admin\/admin-ajax.php","post_id":"1461"};
/* ]]> */
</script>
<script type='text/javascript' src='style/js/postviews-cache.js'></script>
<script type='text/javascript' src='style/js/bootstrap.min.js'></script>
<script type='text/javascript' src='style/js/smoothscroll.js'></script>
<script type='text/javascript' src='style/js/jquery.slicknav.js'></script>
<script type='text/javascript' src='style/js/jquery.fitvids.js'></script>
<script type='text/javascript' src='style/js/imagesloaded.min.js'></script>
<script type='text/javascript' src='style/js/masonry.min.js'></script>
<script type='text/javascript' src='style/js/jquery.masonry.min.js'></script>
<script type='text/javascript' src='style/js/scripts.js'></script>
<script type='text/javascript' src='style/js/comment-reply.min.js'></script>
<script type='text/javascript' src='style/js/wp-embed.min.js'></script>
<script type='text/javascript' src='style/js/wechat-reward.js'></script>
<script type='text/javascript' src='style/js/form.js'></script>
	    <script type="type/html" id="xhshop_payment_gateways_jspai_html">
    	    <div id="xhshop-pay-callback-payment-gateway">
    		<div class="xunhupay open"  onclick="window.XHSHOP.payment_gateway.hide();"></div>
        		<ul class="xunhupay-list" id="xunhupay-list" style="display: none;">
            		<li class="xunhupay-loading" style="border-top:0;display:none;"></li>
            		<li onclick="window.XHSHOP.payment_gateway.submit('xh-payment-gateway-alipay-payment');"  class="xunhupay-btn channel-ali"><i style="width:50px;height:40px;background: url(style/images/img/icon.png) center no-repeat;"></i><span>点击付款</span></li><li onclick="window.XHSHOP.payment_gateway.submit('xh-payment-gateway-wechat-payment');" style="border-bottom:0" class="xunhupay-btn channel-ali"><i style="width:50px;height:40px;background: url(style/images/img/icon01.png) center no-repeat;"></i><span>点击付款</span></li>            		<li class="xunhupay-close" onclick="window.XHSHOP.payment_gateway.hide();"></li>
        		</ul>
    		</div>
		</script>
				<script type="text/javascript">
		(function($){
			if(!window.XHSHOP){window.XHSHOP={};}
			window.XHSHOP.url_ajax ='http://jspang.com/wp-admin/admin-ajax.php';
			window.XHSHOP.alert=function(msg){alert(msg);};
			window.XHSHOP.beforeSend=function(){$('.xunhupay-loading').css('display','block');};
			window.XHSHOP.complete=function(){};
			window.XHSHOP.error=function(e){window.XHSHOP.alert("系统异常，请稍候重试！");};
			window.XHSHOP.finish=function(){$('.xunhupay-loading').css('display','none');};
			window.XHSHOP.unauth =function(callback){(function(){location.href="/wp-login.php?redirect_to="+encodeURIComponent(location.href.toString());})();};
	
			window.XHSHOP.pay=function(data){
							    window.XHSHOP.payment_gateway.show(data);
			    			};
			
			window.XHSHOP.payment_gateway={
					__data:null,
					__beforeSends:[window.XHSHOP.beforeSend],
					__completes:[window.XHSHOP.complete],
					__finishs:[window.XHSHOP.finish],
					show:function(data){
						window.XHSHOP.payment_gateway.__data=data;
						window.XHSHOP.payment_gateways_templete=$('#xhshop_payment_gateways_jspai_html').html();
						
												
						window.XHSHOP.payment_gateway.hide();
				 		$('body').append(window.XHSHOP.payment_gateways_templete);
				 		$('#xunhupay-list').fadeIn();
				 		window.XHSHOP.payment_gateway.__resize();
				 		
				 							},
					__resize : function(){
			 			if(document.documentElement.clientWidth<=450){
			 				return;
			 			}
						var d = document.getElementById('xunhupay-list');
						if(d==null){return;}
						d.style.top = ((document.documentElement.clientHeight - d.offsetHeight) / 2) + "px";
						d.style.left = ((document.documentElement.clientWidth - d.offsetWidth) / 2) + "px";
			 		},
					hide:function(){
												var $gateway =$('#xhshop-pay-callback-payment-gateway');
						if($gateway.length>0){
							$gateway.remove();
						}
											},
					submit:function(payment_gateway_id){
						var data =window.XHSHOP.payment_gateway.__data;
						if(!data){data={};}
						data.action='XHSHOP_SHIPPINGS_SIMPLE_PAY';
						data.callback='?';
						data.call_url=encodeURIComponent(location.href.toString());
						data.payment_gateway=payment_gateway_id;
						$.ajax({
							url:window.XHSHOP.url_ajax,
							type:'post',
							timeout:60*1000,
							async:true,
							cache:false,
							data:data,
							traditional:false,
							dataType: "jsonp",
							jsonp: "callback", 
							beforeSend:function(){
								for(var i=0;i<window.XHSHOP.payment_gateway.__beforeSends.length;i++){
									window.XHSHOP.payment_gateway.__beforeSends[i]();
								}
							},
							complete:function(){
								for(var i=0;i<window.XHSHOP.payment_gateway.__completes.length;i++){
									window.XHSHOP.payment_gateway.__completes[i]();
								}
							},
							success:function(call){
								for(var i=0;i<window.XHSHOP.payment_gateway.__finishs.length;i++){
									window.XHSHOP.payment_gateway.__finishs[i]();
								}
								if(!call){
									return;
								}
								
								if(call.errcode!=0){
									if(call.errcode==501){
										window.XHSHOP.unauth();
										return;
									}
									
																		window.XHSHOP.payment_gateway.hide();
									window.XHSHOP.alert('errcode:'+call.errcode+';errmsg:'+call.errmsg);
									return;
								}
								
																$('body').append('<div style="display:none;">'+call.errmsg+'</div>');
							},
							error:function(e){
								for(var i=0;i<window.XHSHOP.payment_gateway.__finishs.length;i++){
									window.XHSHOP.payment_gateway.__finishs[i]();
								}
								console.warn(e.responseText);
								window.XHSHOP.error(e);
								window.XHSHOP.payment_gateway.hide();
							}
						});
					}
    			};
    		})(jQuery);
		</script>
	    
</body>
</html>

<!-- Dynamic page generated in 1.516 seconds. -->
<!-- Cached page generated by WP-Super-Cache on 2017-10-30 18:48:11 -->

<!-- Compression = gzip -->